使CSS工具提示跟随鼠标指针

Question

我正在创建一个基于CSS的工具提示，其中将有许多内容在提示中，并且不是在固定位置，我想知道是否有一种简单的方法使其在您悬停在链接上时跟随光标移动。

以下是基于CSS的工具提示的示例。

<div class="couponcode">First Link
    <span class="coupontooltip">Content 1</span>
</div>

.couponcode:hover .coupontooltip {
display: block;
}

.coupontooltip {
display: none;
background: #C8C8C8;
margin-left: 28px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
}

http://jsfiddle.net/q46Xz/

- Greenhoe

---

相关：https://dev59.com/vGUo5IYBdhLWcg3w3ymi - Dave Chen

Answer 1

这样的东西

var tooltip = document.querySelectorAll('.coupontooltip');

document.addEventListener('mousemove', fn, false);

function fn(e) {
    for (var i=tooltip.length; i--;) {
        tooltip[i].style.left = e.pageX + 'px';
        tooltip[i].style.top = e.pageY + 'px';
    }
}

FIDDLE

- adeneo

---

谢谢，我已经让它工作了，但是如何调整提示框距离鼠标的距离？如果您查看我的页面http://stormable.com/hero-lore-demon-hunter/，在帖子底部，您会看到一个名为“伊利丹”的链接，如果将光标放在其上，您会注意到提示框随光标移动，但是距离光标下方和右侧大约200像素。 - Greenhoe

@Greenhoe - 只需稍微加减一下，就像这样-> http://jsfiddle.net/q46Xz/188/ - adeneo

pageX/Y是鼠标在窗口中的位置，因此如果元素使用相对/绝对/静态等定位方式进行定位，则其顶部和左侧位置可能与鼠标位置有很大不同。 - adeneo

一个合适的插件应该考虑到窗口调整大小、浏览器不一致等问题。但是你不能指望在这里得到那样的东西，答案向你展示了如何随着鼠标光标移动而移动某些东西，如果你想要适用于每种情况的东西，请使用插件。这里是 qTip 的源代码，我无法将所有代码作为快速答案编写，适当的工具提示很复杂，这就是为什么大多数人使用插件的原因。 - adeneo

谢谢你帮我更好地理解这一切，我会研究你推荐的插件。 - Greenhoe

Answer 2

以下是考虑到您窗口的高度和宽度的版本：

function showTooltip(e) {
  var tooltip = e.target.classList.contains("coupontooltip")
      ? e.target
      : e.target.querySelector(":scope .coupontooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}

.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .coupontooltip {
    display: block;
}

.coupontooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    color: black;
    padding: 5px;
    z-index: 1000;
}

Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="coupontooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="coupontooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="coupontooltip">This is yet
another tooltip</span></span>.

（另请参见此Fiddle）

- John Slegers

---

看起来很棒，但是不幸的是，当应用于表格的<td>元素时，它无法正常工作：提示只会在表格完成后很久才出现，在页面页脚附近甚至超出了页脚。 - parsecer