HTML-工具提示相对于鼠标指针的位置

如何将工具提示对齐为自然样式：鼠标指针的右下角？

 <!DOCTYPE html>
<html>
<head>
  <title>Tooltip with Image</title>
  <meta charset="UTF-8">
  <style type="text/css">
    .tooltip {
        text-decoration:none;
        position:relative;
    }
     .tooltip span {
        display:none;
    }
     .tooltip span img {
        float:left;
    }
     .tooltip:hover span {
        display:block;
        position:absolute;
        overflow:hidden;
    }
  </style>
</head>
<body>
  <a class="tooltip" href="http://www.google.com/">
    Google
    <span>
      <img alt="" src="http://www.google.com/images/srpr/logo4w.png">
    </span>
  </a>
</body>
</html>

原文由 Ben 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 357

对于默认工具提示行为，只需添加 title 属性。虽然这不能包含图像。

 <div title="regular tooltip">Hover me</div>

在你澄清我用纯 JavaScript 完成的问题之前，希望你觉得它有用。图像将弹出并跟随鼠标。

jsFiddle

JavaScript

 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 span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

扩展多个元素

多个元素的一种解决方案是更新所有工具提示 span 并在鼠标移动时将它们设置在光标下。

jsFiddle

 var tooltips = document.querySelectorAll('.tooltip span');

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

原文由 Daniel Imms 发布，翻译遵循 CC BY-SA 3.0 许可协议

在没有 JS 的情况下执行此操作的一种方法是使用悬停操作来显示隐藏的 HTML 元素，请参阅此代码笔：

http://codepen.io/c0un7z3r0/pen/LZWXEw

请注意，包含工具提示内容的 span 是相对于父 li 的。魔术就在这里：

 ul#list_of_thrones li > span{
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  display:block;
  ...
}

如您所见，除非列表项悬停在上方，否则 span 是隐藏的，从而显示 span 元素，span 可以包含您需要的 html。在随附的代码笔中，我还为箭头使用了 :after 元素，但这当然是完全可选的，并且仅包含在本示例中用于装饰目的。

我希望这会有所帮助，我觉得有必要发布，因为所有其他答案都包括 JS 解决方案，但 OP 要求仅提供 HTML/CSS 解决方案。

原文由 Anthony Cregan 发布，翻译遵循 CC BY-SA 4.0 许可协议

HTML-工具提示相对于鼠标指针的位置

扩展多个元素

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译