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事件。预览带有两个ID

Answer 2

这是使用类而不是ID的快速解决方案。当您多次使用相同的ID时，只会选择第一个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

跨度的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';
};

希望这是您所需要的。

多个工具提示不起作用

3 个答案: