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

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

  •  4
  • kquinn  · 技术社区  · 16 年前

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

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

    6 回复  |  直到 16 年前
        1
  •  11
  •   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

        2
  •  0
  •   tanathos    16 年前

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

        3
  •  0
  •   Anand    16 年前

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

        4
  •  0
  •   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 */}
    
        5
  •  -1
  •   Waqas Zahoor    16 年前

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

        6
  •  -1
  •   zoby    12 年前

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