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

我正在寻找一个JQuery代码示例或库，用于在光标悬停在元素上时显示工具提示。具体来说，我要做的是在悬停状态下显示我自己的元素，而不是从宿主元素工具提示中自动构造或加载的元素。我看过几个JQuery工具提示插件，它们似乎都无法做到这一点，但在其他方面非常复杂。这似乎只是JS/JQuery的几行代码，但我也没有找到任何有效的教程

---

理想的解决方案还可以处理边界附近的工具提示，有一个“粘性工具提示”选项，可以选择使用AJAX加载要显示为工具提示的HTML（而不是HTML/JS中的内联），以及处理大量工具提示（当然一次只显示一个），我无法为您提供完整的解决方案，但将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);

（函数（$）{
var$div=$（''）.css({
位置：'绝对'，
背景：“白色”，
边框：“1px纯黑”，
填充：“10px”，
zIndex:999，
显示：“无”
}).附于（“主体”）；
$（'a.tooltip'）
.mousemove（函数（e）{
$div.css({
顶部：e.pageY+10+‘px’，
左：e.pageX+10+‘px’
});
})
.hover（函数（）{
$div.show（）.html（'Text to display…'）；
}，函数（）{
$div.hide（）；
});
})（jQuery）；

例如->

似乎可以做您想做的一切。您可以使用

bodyHandler:function（）

定义工具提示应该是什么。它可以是您定义的div（在即将显示时甚至可以使用ajax填充），请参见第二个示例。我不知道粘性工具提示，但其他功能都在这里提供。

我真的很喜欢它，它允许您在ajax模式下也能很好地工作，同时异步加载内容的外部资源。

好的，我终于有时间重新讨论了这一点，下面是我决定的。总的来说我很满意；我注意到的唯一问题是，如果在窗口的右下角有一个带有工具提示的元素，那么工具提示在元素和窗口边框之间没有显示的空间，它将显示在元素的顶部，并在元素和弹出窗口之间的焦点翻转时开始闪烁。解决这个问题的技巧，或者对我的JS风格的一般评论（我以前很少写JS代码）都是受欢迎的

JavaScript函数：

function showInfoBox(parent_index, parent) {

var parent_id = $(this).attr('id');
var infobox_id = parent_id+"_ib";
$("body").append("<div class='infobox' id='"+infobox_id+"'><p>This is an infobox for "+parent_id+"</p></div>"); //customize here
var infobox = $("#"+infobox_id);

$(this).mousemove(function(e){
    var pad = 10;
    var x = Math.min(e.pageX + pad, $(window).width() - infobox.width() - pad);
    var y = Math.min(e.pageY + pad, $(window).height() + $(window).scrollTop() - infobox.height() - pad);
    infobox.css({
        top:  y + 'px',
        left: x + 'px'
    });
})
    .hover(function(){
        infobox.show();
    }, function(){
        infobox.hide();
    });

CSS要求：

.infobox { display:none; position:absolute; z-index:999; /* more CSS if you like */}

---

Jquery中的简单工具提示这里有一个很棒的自定义工具提示

.infobox { display:none; position:absolute; z-index:999; /* more CSS if you like */}