HTML-Tooltip相对于鼠标指针的位置
如何alignment工具提示的自然风格：鼠标指针的右下angular？
~~~一些更多的文字可以提交。 ~~~一些更多的文字可以提交。 ~~~一些更多的文字可以提交。 ~~~
<!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.comhttp://img.dovov.comsrpr/logo4w.png"> </span> </a> </body> </html> 对于默认的工具提示行为，只需添加title属性即可。 这不能包含图像。
<div title="regular tooltip">Hover me</div>
在澄清这个问题之前，我已经在纯JavaScript中做了这个，希望你觉得它有用。 图像将popup并按照鼠标。
的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; } };
没有JS的一种方法是使用hover操作来显示隐藏的HTML元素，请参阅此codepen：
http://codepen.io/c0un7z3r0/pen/LZWXEw
请注意，包含工具提示内容的跨度相对于父li。 魔术在这里：
ul#list_of_thrones li > span{ position: relative; display:none; } ul#list_of_thrones li:hover > span{ position: absolute; display:block; ... }
正如你所看到的，跨度是隐藏的，除非listitem被覆盖，从而揭示span元素，跨度可以包含尽可能多的html。 在附带的codepen中，我还使用了a：after元素作为箭头，但是这当然是完全可选的，并且只是被包含在本例中用于美观目的。
我希望这有帮助，我觉得不得不作为所有其他答案包括JS解决scheme，但OP要求只提供HTML / CSS解决scheme。
你可以使用jQuery UI插件，以下是参考URL
- http://jqueryui.com/tooltip/
- http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
- http://jquery-plugins.bassistance.de/tooltip/demo/
工具提示相对于鼠标指针的位置设置为TRUE。
$('.tooltip').tooltip({ track: true });
我们可以使用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'; });
你可以查看这个post了解更多细节。 http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html
我更喜欢这种技术：
var tooltips = document.querySelectorAll('.hastooltip'); for(var i = 0; i < tooltips.length; i++) { tooltips[i].addEventListener('mousemove', function fn(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'; }); }
.hastooltip { color: red; cursor: pointer; } .hastooltip:hover .tooltip { display: block; color: black; } .tooltip { position: absolute; white-space: nowrap; display: none; background: #ffffcc; border: 1px solid black; padding: 5px; z-index: 1000; }
Lorem ipsum dolor sit amet, <span class="hastooltip">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="hastooltip">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="hastooltip"> laborum<span class="tooltip">This is yet another tooltip</span></span>.
