HTML-Tooltip 相对于鼠标指针的位置

Posted 2023-02-22

技术标签:

【中文标题】HTML-Tooltip 相对于鼠标指针的位置【英文标题】：HTML-Tooltip position relative to mouse pointer 【发布时间】：2013-03-20 03:10:30 【问题描述】：

如何将工具提示对齐自然风格：鼠标指针右下角？

<!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  src="http://www.google.com/images/srpr/logo4w.png">
    </span>
  </a>
</body>
</html>

【问题讨论】：

你在使用 jquery 吗？还是只有 css/javascript？悬停元素时需要跟随鼠标指针还是只在第一次悬停对象时在某个位置显示一次工具提示？没有 jQuery，没有 JavaScript，只有 CSS。我不需要关注，我只想要常见的工具提示行为。 【参考方案1】：

对于默认的工具提示行为，只需添加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;
    
;

【讨论】：

非常感谢！但我需要工具提示中的图像，这就是重点。而且我不想使用任何 JavaScript。再次感谢您。不幸的是，没有 JavaScript 就无法跟随鼠标。你能做的最好的就是像你在你的例子中那样显示。没有 JavaScript 的任何原因？如上所述，我不需要任何后续。如果你想要这个功能，你确实需要它:) 现在几乎每个浏览器都打开了它。添加 transition 一切都很完美:)【参考方案2】：

不使用 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;
  ...

如您所见，除非将 listitem 悬停在上面，否则 span 是隐藏的，因此可以显示 span 元素，span 可以包含您需要的任意数量的 html。在随附的 codepen 中，我还为箭头使用了 :after 元素，但这当然是完全可选的，仅出于美观目的而包含在此示例中。

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

【讨论】：

这与鼠标指针位置无关。它是相对于 DOM 元素的。我的例子是相对于悬停的元素，而不是指针。无论是问题已经更新还是我误解了，无论哪种方式，给出的 JS 示例都是正确的解决方案，你不能单独使用 CSS 来做到这一点。我已相应地在其他地方对这个问题进行了投票。不要粗鲁，但我看不出有什么误解，标题声明'..相对于鼠标指针' 不要直言不讳，但如果您阅读其他帖子，您会发现这个问题已经更新和扩展了很多，当我发布我的答案时问题并不清楚，问题已经进行了扩展和澄清。我没有删除答案，因为它指出需要 JS 才能实现所需的效果，如果只需要 HTML/CSS 解决方案，那么这也是不使用 JS 的最接近的解决方案。对于只需要 HTML/CSS 的人来说，这是一个很好的解决方案，并且 DOM 元素足够小，工具提示几乎出现在鼠标指针所在的位置。在我的例子中，“帮助”图标在悬停时显示的内容比标题属性支持的更丰富。 +1【参考方案3】：

我更喜欢这种技术：

function showTooltip(e) 
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  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 .tooltip 
    display: block;


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

Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">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="tooltip">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="tooltip">This is yet
another tooltip</span></span>.

（另见this Fiddle）

【讨论】：

只要页面不包含垂直滚动条，上面的代码就可以正常工作，它有最大高度，这是行不通的。使用带有 jquery 样式的普通工具提示。 5px 是一个假设 - 我的鼠标指针设置为大 (>32px)，我永远无法将指针移出工具提示文本。【参考方案4】：

您可以使用 jQuery UI 插件，以下是参考网址

http://jqueryui.com/tooltip/ http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ http://jquery-plugins.bassistance.de/tooltip/demo/

将工具提示相对于鼠标指针的位置设置为 TRUE 例如。

$('.tooltip').tooltip( track: true );

【讨论】：

【参考方案5】：

这可以用纯 html 和 css 来完成。这可能不是最好的方法，但我们都有不同的限制。根据您的具体情况，有 3 种方法可能有用。

第一种方法是在链接顶部覆盖一个不可见的表格，并在每个显示图像的单元格上进行悬停操作。

#imagehover td:hover::after
  content: "             ";
  white-space: pre;
  background-image: url("http://www.google.com/images/srpr/logo4w.png");
  position: relative;
  left: 5px;
  top: 5px;
  font-size: 20px;
  background-color: transparent;
  background-position: 0px 0px;
  background-size: 60px 20px;
  background-repeat: no-repeat;
  



#imagehover table, #imagehover th, #imagehover td 
  border: 0px;
  border-spacing: 0px;

<a href="https://www.google.com">
<table id="imagehover" style="width:50px;height:10px;z-index:9999;position:absolute" cellspacing="0">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

</table>
Google</a>

第二个依赖于能够创建自己的光标图像

#googleLink

cursor: url(https://winter-bush-d06c.sto.workers.dev/cursor-extern.php?id=98272),url(https://9dc1a5c00e8109665645209c2d036b1c.cloudflareworkers.com/cursor-extern.php?id=98272),auto;

&lt;a href="https://www.google.com" id="googleLink"&gt;Google&lt;/a&gt;

虽然普通标题工具提示在技术上不允许使用图像，但它允许任何 unicode characters，包括 block letters 和 emojis，这可能适合您的需求。

&lt;a href="https://www.google.com" title="??️?️????" alt="??️?️????"&gt;Google&lt;/a&gt;

【讨论】：

【参考方案6】：

我们可以在 Angularjs 中使用“指令”来实现同样的效果。

            //Bind mousemove event to the element which will show tooltip
            $("#tooltip").mousemove(function(e) 
                //find X & Y coodrinates
                x = e.clientX,
                y = e.clientY;

                //Set tooltip position according to mouse position
                tooltipSpan.style.top = (y + 20) + 'px';
                tooltipSpan.style.left = (x + 20) + 'px';
            );

您可以查看此帖子以获取更多详细信息。 http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html

【讨论】：

以上是关于HTML-Tooltip 相对于鼠标指针的位置的主要内容，如果未能解决你的问题，请参考以下文章

client offset screen 的区别

JavaScript 中一些概念理解：clientXclientYoffsetXoffsetYscreenXscreenY

实现搜索框跟随鼠标悬停菜单功能

JavaScript 中一些概念理解：clientXclientYoffsetXoffsetYscreenXscreenY

博客2