Javascript 当有多个工具时，工具提示不起作用

首先，对不起，因为我肯定这会是件愚蠢的事

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

HTML:

CSS:

链接到JSFIDLE：

提前谢谢大家

var tooltipSpan=document.getElementById（'tooltip-span'）；
var tooltipSpan1=document.getElementById（'tooltip-span2'）；
window.onmousemove=函数（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 span、.tooltip span2{
显示：无；
}
.工具提示：悬停范围{
显示：块；
位置：固定；
溢出：隐藏；
}
说明：
/
这是一个使用类而不是id的快速解决方案。当您多次使用同一id时，只会选择第一个id，这就是为什么第二个id没有在原始代码中移动

getElementsByClassName
获取一个
HTMLCollection
，因此必须循环内部的元素


var tooltipSpans=document.getElementsByClassName（'tooltip-span'）；
window.onmousemove=函数（e）{
var x=e.clientX，
y=e.clientY，
i、 l=tooltipSpans.length；
对于（i=0；i
。工具提示{
文字装饰：无；
位置：相对位置；
}
.工具提示范围{
显示：无；
}
.工具提示：悬停范围{
显示：块；
位置：固定；
溢出：隐藏；
}
说明：
/
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>

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';
};

JS:

<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>

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';
};

希望这就是您所需要的。
document.getElementById（'tooltip-span'）；id应该是唯一的。谢谢！完美地工作：）正是我所需要的，而且工作也很完美。虽然我宁愿使用@kaddath解决方案，但这段代码可能是一个“列表”，而且似乎更容易不必创建唯一的span id。无论如何，非常感谢你！：）
.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

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';
};