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

时间：2013-03-29 12:05:25

标签： css alignment tooltip

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

~~~还有一些文字能够提交。 ~~~还有一些文本可以提交。 ~~~还有一些文本可以提交。 ~~~ 

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

6 个答案:

答案 0 :(得分：79)

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

答案 1 :(得分：10)

没有JS的一种方法是使用悬停操作来显示隐藏的HTML元素，请参阅此代码集：

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

请注意，包含工具提示内容的范围与父li相关。神奇之处在于：

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

正如您所看到的，跨度是隐藏的，除非listitem悬停在上面，因此显示span元素，span可以包含您需要的html。在附加的codepen中，我还使用了一个：在箭头的元素之后，但当然这完全是可选的，并且仅出于美观目的而包含在此示例中。

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

答案 2 :(得分：7)

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

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

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

答案 3 :(得分：6)

我更喜欢这种技巧：

＆＃13;
＆＃13; 
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);
}
＆＃13; 
.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;
}
＆＃13; 
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>.
＆＃13;
＆＃13;
＆＃13;

（另见https://www.devart.com/dotconnect/sqlite/docs/Devart.Data.SQLite~Devart.Data.SQLite.SQLiteDataReader~HasRows.html）

答案 4 :(得分：3)

我们可以使用Angularjs中的“Directive”来实现相同目的。

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

答案 5 :(得分：3)

这可以使用纯HTML和CSS完成。这可能不是最好的方法，但我们都有不同的局限性。根据您的具体情况，有3种方法可能有用。

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

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

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

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

}
<a href="https://www.google.com" id="googleLink">Google</a>

  1. 尽管正常标题工具提示在技术上不允许图像，但它确实允许包含unicode characters和block letters在内的任何emojis，这些都可以满足您的需求。

<a href="https://www.google.com" title="??️?️????" alt="??️?️????">Google</a>

相关问题
最新问题