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

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

~~~一些更多的文本能够提交。 ~~~一些更多的文本能够提交。 ~~~一些更多的文本能够提交。 ~~~

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

Answer 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;
    }
};

Answer 2:

要做到这一点，而不JS的一种方法是使用悬停动作来揭示否则隐藏在HTML元素，请参阅本codepen：

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

需要注意的是包含提示内容跨度是相对父里。神奇的是在这里：

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

正如你所看到的，除非列表项悬停，从而揭示span元素的跨度是隐藏的，因为你需要的跨度可以含有多达HTML。在codepen附我也使用了：为箭头元件之后但当然完全是可选的，并且仅被包括在本实施例中用于美容目的。

我希望这会有所帮助，因为所有其他的答案包括JS的解决方案，但OP问一个HTML / CSS唯一的解决办法我觉得有必要发布。

Answer 3:

您可以使用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 });

Answer 4:

我喜欢这种方法：

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

（另见本小提琴 ）

Answer 5:

我们可以实现在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 position relative to mouse pointer