Question

我正在寻找一个JQuery代码示例或库，用于在光标悬停在元素上时显示工具提示。具体来说，我想要做的是显示我自己的＆lt; div＆gt;悬停时的元素，而不是自动构造或从主机元素加载的工具提示。我看了几个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);

一个例子 - ＆gt; http://jsbin.com/emoso

Answer 2

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

Answer 3

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

Answer 4

好的，我终于有时间重新审视这一点，这就是我所确定的。我总体上很满意;我注意到的唯一问题是如果你在窗口的右下角有一个带有工具提示的元素，这样工具提示没有空间在元素和窗口边框之间显示，它将显示在顶部当元素和弹出窗口之间的焦点翻转时，元素开始闪烁。关于解决这个问题的提示，或者关于我的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();
    });

};

调用文档加载的JQuery：

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

需要CSS：

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

Answer 5

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

Answer 6

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

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

6 个答案: