基本工具提示(jQuery)

Question

HTML:

<a href="#" rel="tooltip">Open Tooltip</a>
<div id="tooltip">Tooltip Content</div>

我检查了一些工具提示插件,但我的要求是一个非常基本的工具提示,显示悬停时隐藏的div.所有插件都有太多我不需要的高级选项,并且已经设置了可能难以修改的工具提示.

我很感激任何帮助.谢谢.

Answer 1

你可以自己动手.

我的建议是只存储clientX和clientY传递给鼠标事件对象的属性onmouseover事件处理程序.然后将隐藏div 的CSS屏幕位置(left,top)设置为那些坐标,你就是金色的.确保div的positionCSS属性是absolute

一个快速未经测试的例子只是为了给你一个想法:

$( '[rel="tooltip"]' ).hover( function(e) {
   var x = e.clientX;
   var y = e.clientY;
   _div.css( { top: y, left: x, position: 'absolute' } )
       .fadeIn();
}, function() {
    _div.fadeOut();
} );