如何将工具提示与自然样式对齐：鼠标指针的右下角？
~~~还有一些文字能够提交。 ~~~还有一些文本可以提交。 ~~~还有一些文本可以提交。 ~~~
<!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>
答案 0 :(得分：79)
对于默认的工具提示行为，只需添加title属性即可。但这不能包含图像。
<div title="regular tooltip">Hover me</div>
在你澄清问题之前我用纯JavaScript做了这个，希望你发现它很有用。图像将弹出并跟随鼠标。
<强>的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并在鼠标移动时将它们设置在光标下。
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)
我更喜欢这种技巧：
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>.
答案 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种方法可能有用。
#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;
}<a href="https://www.google.com" id="googleLink">Google</a>
<a href="https://www.google.com" title="??️?️????" alt="??️?️????">Google</a>