如何将工具提示对齐为自然样式：鼠标指针的右下角？
<!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>
对于默认的工具提示行为，只需添加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;
}
};
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
