工具提示在有多个时不起作用

Question

首先，抱歉，因为我确定会发生一些愚蠢的事情。

我有这段代码，我想在其中悬停文本时显示图像。在工具提示上执行此操作，一切似乎都很好，但工具提示仅适用于第一个。我应该为每个创建类吗？

HTML:

<div title="regular tooltip">Description:

<a class="tooltip" href="http://www.google.com/">
    Tooltip 1
    <span id="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

/

<a class="tooltip" href="http://www.google.com/">
    Tooltip 2
    <span id="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>


</div>

JS:

var tooltipSpan = document.getElementById('tooltip-span');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
};

CSS:

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

链接到 jsfiddle：http://jsfiddle.net/javierestebanx/HJf8q/3430/

提前谢谢大家！

Answer 1

var tooltipSpan = document.getElementById('tooltip-span');
var tooltipSpan1 =document.getElementById('tooltip-span2');
window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
 tooltipSpan1.style.top = (y + 20) + 'px';
    tooltipSpan1.style.left = (x + 20) + 'px';
};

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span ,.tooltip span2{
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

<div title="regular tooltip">Description:

<a class="tooltip" href="http://www.google.com/">
    Tooltip 1
    <span id="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

/

<a class="tooltip" href="http://www.google.com/">
    Tooltip 2
    <span id="tooltip-span2">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>


</div>

id="tooltip-span"在DOM中使用了两次。它应该是独一无二的。您可以创建单独的 ID 或使用 className 并绑定 onmousemove event.the 预览有两个 ID

Answer 2

这是一个使用 class 而不是 id 的快速解决方案。当你多次使用相同的id时，只有第一个会被选中，这就是为什么第二个在你的原始代码中没有移动。

getElementsByClassName得到一个HTMLCollection，所以你必须循环里面的元素。

var tooltipSpans = document.getElementsByClassName('tooltip-span');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY,
        i, l = tooltipSpans.length;
    for(i = 0; i < l; i++){
      tooltipSpans[i].style.top = (y + 20) + 'px';
      tooltipSpans[i].style.left = (x + 20) + 'px';
    }
};

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

<div title="regular tooltip">Description:

<a class="tooltip" href="http://www.google.com/">
    Tooltip 1
    <span class="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

/

<a class="tooltip" href="http://www.google.com/">
    Tooltip 2
    <span class="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>


</div>

Answer 3

span 的 ID 必须是唯一的。这是工作代码

HTML:

<div title="regular tooltip">Description:

<a class="tooltip" href="http://www.google.com/">
    Tooltip 1
    <span id="tooltip-span1">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

/

<a class="tooltip" href="http://www.google.com/">
    Tooltip 2
    <span id="tooltip-span2">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>


</div>

CSS

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

JS:

var tooltipSpan = document.getElementById('tooltip-span1');
var tooltipSpan2 = document.getElementById('tooltip-span2');
window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
    tooltipSpan2.style.top = (y + 20) + 'px';
    tooltipSpan2.style.left = (x + 20) + 'px';
};

希望这就是您所需要的。

工具提示在有多个时不起作用

Tooltip not working when having more than one

javascript

tooltip