CSS HTML-Tooltip 相对于鼠标指针的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15702867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML-Tooltip position relative to mouse pointer
提问by Ben
How to align the tooltip the natural style: right bottom of the mouse pointer?
如何将工具提示对齐自然样式：鼠标指针的右下角？
<!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>
回答by Daniel Imms
For default tooltip behavior simply add the titleattribute. This can't contain images though.
对于默认工具提示行为，只需添加title属性。但这不能包含图像。
<div title="regular tooltip">Hover me</div>
Before you clarified the question I did this up in pure JavaScript, hope you find it useful. The image will pop up and follow the mouse.
在你澄清这个问题之前，我是用纯 JavaScript 完成的，希望你觉得它有用。图像将弹出并跟随鼠标移动。
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
CSS
.tooltip span {
display:none;
}
.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}
Extending for multiple elements
扩展多个元素
One solution for multiple elements is to update all tooltip span's and setting them under the cursor on mouse move.
多个元素的一种解决方案是更新所有 tooltipspan并在鼠标移动时将它们设置在光标下。
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;
}
};
回答by Anthony Cregan
One way to do this without JS is to use the hover action to reveal a HTML element that is otherwise hidden, see this codepen:
在没有 JS 的情况下执行此操作的一种方法是使用悬停操作来显示隐藏的 HTML 元素，请参阅此代码笔：
http://codepen.io/c0un7z3r0/pen/LZWXEw
http://codepen.io/c0un7z3r0/pen/LZWXEw
Note that the span that contains the tooltip content is relative to the parent li. The magic is here:
请注意，包含工具提示内容的跨度是相对于父 li 的。魔法在这里：
ul#list_of_thrones li > span{
display:none;
}
ul#list_of_thrones li:hover > span{
position: absolute;
display:block;
...
}
As you can see, the span is hidden unless the listitem is hovered over, thus revealing the span element, the span can contain as much html as you need. In the codepen attached I have also used a :after element for the arrow but that of course is entirely optional and has only been included in this example for cosmetic purposes.
如您所见，除非将列表项悬停在上方，否则跨度是隐藏的，从而显示跨度元素，跨度可以包含您需要的尽可能多的 html。在附带的代码笔中，我还使用了 :after 元素作为箭头，但这当然是完全可选的，并且仅出于美观目的包含在本示例中。
I hope this helps, I felt compelled to post as all the other answers included JS solutions but the OP asked for a HTML/CSS only solution.
我希望这会有所帮助，因为所有其他答案都包含 JS 解决方案，所以我觉得有必要发布，但 OP 要求仅提供 HTML/CSS 解决方案。
回答by Atul Bhosale
You can use jQuery UI plugin, following are reference URLs
您可以使用 jQuery UI 插件，以下是参考 URL
- http://jqueryui.com/tooltip/
- http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
- http://jquery-plugins.bassistance.de/tooltip/demo/
- http://jqueryui.com/tooltip/
- http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
- http://jquery-plugins.bassistance.de/tooltip/demo/
Set track to TRUE for Tooltip position relative to mouse pointer eg.
对于相对于鼠标指针的工具提示位置，将 track 设置为 TRUE，例如。
$('.tooltip').tooltip({ track: true });回答by John Slegers
I prefer this technique:
我更喜欢这种技术：
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>.(see also this Fiddle)
（另见这个小提琴）
回答by AugustRush
We can achieve the same using "Directive" in Angularjs.
我们可以使用 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';
});
You can check this post for further details. http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html
您可以查看此帖子以获取更多详细信息。 http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html
回答by Patrick Ring
This CAN be done with pure html and css. It may not be the best way but we all have different limitations. There are 3 ways that could be useful depending on what your specific circumstances are.
这可以用纯 html 和 css 来完成。这可能不是最好的方法，但我们都有不同的局限性。根据您的具体情况，有 3 种可能有用的方法。
- The first involves overlaying an invisible table over top of your link with a hover action on each cell that displays an image.
- 第一个涉及在链接顶部覆盖一个不可见的表格，并在每个显示图像的单元格上进行悬停操作。
#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>- The second relies on being able to create your own cursor image
- 第二个依赖于能够创建自己的光标图像
#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>- While the normal title tooltip doesn't technically allow images it does allow any unicode charactersincluding block lettersand emojiswhich may suite your needs.
- 虽然正常的标题工具提示在技术上不允许使用图像，但它允许任何可能满足您需求的unicode 字符，包括大写字母和表情符号。
<a href="https://www.google.com" title="??" alt="??">Google</a>