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

【问题标题】：Getting custom tooltips with JQuery使用 JQuery 获取自定义工具提示
【发布时间】：2009-01-23 13:36:08
【问题描述】：

我正在寻找用于在光标悬停在元素上时显示工具提示的 JQuery 代码示例或库。具体来说，我想做的是在悬停时显示我自己的

元素，而不是自动构建或从主机元素加载的工具提示。我查看了几个 JQuery 工具提示插件，它们似乎都无法做到这一点，但在其他方面非常复杂。这似乎应该只需要几行 JS/JQuery 就可以完成，但我也找不到任何有效的教程。

理想的解决方案还可以处理边框附近的工具提示，具有“粘性工具提示”选项，可以选择使用 AJAX 加载 HTML 以显示为工具提示（与 HTML/JS 中的内联相反），以及很好地处理大量的工具提示（当然一次只显示一个）。

【问题讨论】：

【解决方案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

【讨论】：

【解决方案2】：

我真的很喜欢 jTip，即使在 ajax 模式下也能很好地工作，并为内容异步加载外部资源。

【讨论】：

【解决方案3】：

jquery tooltip plugin 似乎可以为所欲为。您可以使用bodyHandler: function() 来定义工具提示应该是什么。它可以是您定义的 div （甚至可以在即将显示时使用 ajax 填充）参见第二个示例 here 。我不知道粘性工具提示，但其他功能都在这里提供。

【讨论】：

【解决方案4】：

好的，我终于有时间重新审视这个，这就是我决定的。总的来说，我对它很满意；我注意到的唯一问题是，如果您在窗口的右下角有一个带有工具提示的元素，这样工具提示在元素和窗口边框之间没有空间显示，它将出现在顶部当焦点在元素和弹出窗口之间翻转时，元素开始闪烁。欢迎解决这个问题的提示，或者我的 JS 风格的一般 cmets（我以前写过很少的 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();
    });

};

在文档加载时调用的 JQuery：

$(".SELECTOR-FOR-STUFF-TO-GET-INFOBOXES").each(showInfoBox);

所需的 CSS：

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

【讨论】：

【解决方案5】：

Jquery 中的简单工具提示waqzah.wordpress.com

【讨论】：

【解决方案6】：

这是一个很棒的自定义工具提示 https://z-progrock.com/custom-tooltip-using-jquery/

【讨论】：