使用JQuery获取自定义工具提示

Question

我正在寻找一个JQuery代码示例或库,用于在光标悬停在元素上时显示工具提示.具体来说,我想要做的是在悬停时显示我自己的<div>元素,而不是自动构造或从主机元素加载的工具提示.我看了几个JQuery工具提示插件,他们似乎都无法做到这一点,但在其他方面非常复杂.这似乎应该只是JS/JQuery的几行,但我也找不到任何有用的教程.

一个理想的解决方案还可以处理边界附近的工具提示,有一个"粘性工具提示"选项,可以选择加载HTML以使用AJAX显示为工具提示(而不是HTML/JS中的内联),并且处理好大量工具提示(当然只显示一个).

Answer 1

好吧,我无法为您提供完整的解决方案,但将div作为工具提示显示非常简单:

(function($){

    var $div = $('<div/>').css({
        position: 'absolute',
        background: 'white',
        border: '1px solid black',
        padding: '10px',
        zIndex: 999,
        display: 'none'
    }).appendTo('body');

    $('a.tooltip')
        .mousemove(function(e){
            $div.css({
                top: e.pageY + 10 + 'px',
                left: e.pageX + 10 + 'px'
            });
        })
        .hover(function(){
            $div.show().html('Text to display...');
        }, function(){
            $div.hide();
        });

})(jQuery);

一个例子 - > http://jsbin.com/emoso