代码之家 › 专栏 › 技术社区 › kquinn

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

tooltip jquery javascript

kquinn · 技术社区 · 16 年前

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

理想的解决方案还包括处理边界附近的工具提示、使用“粘性工具提示”选项、使用ajax加载要显示为工具提示的html(而不是html/js中的内联),以及处理大量工具提示(当然一次只显示一个)。

6 回复 | 直到 16 年前

James 16 年前

我不能给你一个完整的解决方案,但是让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

tanathos 16 年前

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

Anand 16 年前

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

kquinn 16 年前

好吧,我最后有点时间重温这件事,这就是我的决定。我对它的整体效果非常满意;我注意到的唯一问题是,如果在窗口的右下角有一个带有工具提示的元素,那么工具提示在元素和窗口边框之间没有显示的空间,当焦点在元素和弹出窗口之间翻转时,它将出现在元素的顶部并开始闪烁。建议解决这个问题,或对我的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 */}

-1

Waqas Zahoor 16 年前

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

-1

zoby 12 年前

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