Question

我创建了工具提示来替换默认浏览器“TITLE”bubble。我已经阅读了很多主题，并且所有主题都建议我暂时删除title上的mouseover并稍后重新启用它。我正在努力做到这一点，但我没有做到。这是我的代码以及我使用jQuery live的原因是因为我希望以后将效果应用于动态添加的元素：

tooltip : {
    activate : function(selector){
        $(selector).each(function(){
            $(selector).live('mouseover',function(e){
                tooltip.init(this,true,e);
            });
            $(selector).live('mouseout',function(e){
            tooltip.init(this,false,e);
            });
        });
    },
    init : function(elem,show,e){
        var title = $(elem).attr('title');
        this.addTip(elem,show,title);

        ...
    },
    addTip : function(elem,show,title) {
        var code = '<div class="tooltip-wrapper">'+title+'</div>';
        if(show) {
            $(elem).after(code);
            setTimeout('$(".tooltip-wrapper").fadeIn("slow")',500);
        }
        else {
            $(".tooltip-wrapper").remove();
        }
    }
}

我将此脚本称为：

tooltip.activate(selector);

我遇到的另一个问题是，如果我尝试HIERARCHY_REQUEST_ERR: DOM Exception 3，则会出现tooltip.activate("*");错误，但如果我使用input作为选择器，则会有效。

非常感谢任何输入： - ）

Answer 1

我只想指出几个问题：

在live内使用each会违背live的想法。 each遍历现有元素，而不是未来元素。
但无论如何，你这样做的方式是错误的。您应该删除each（在activate中），因为live已经应用于多个元素。因此，在您的情况下，如果您有N个元素，那么您将添加相同的事件侦听器N次。
*适用于所有元素，效率可能非常低。如何尝试[title]（适用于具有title属性的元素）
如果您在悬停时暂时删除标题，则标题无意义（因为它仅在悬停时显示）。如果您正在创建基于title属性的改进工具提示，只需在第一次遇到它时读取title属性并将其用于工具提示
您应该使用mouseenter和mouseleave代替mouseover和mouseout。如果具有标题的元素具有子元素，则希望在鼠标进入/退出子元素时工具提示继续显示。

Answer 2

这样的事情怎么样？

addTip : function(elem,show,title) {
        var code = '<div class="tooltip-wrapper">'+title+'</div>';
        if(show) {

            $(elem).after(code);
            $(elem).removeAttr('title');
            setTimeout('$(".tooltip-wrapper").fadeIn("slow")',500);
        }
        else {
            $(".tooltip-wrapper").remove();
            $(elem).attr('title',title);
        }
    }

jQuery：暂时删除HOVER上的元素TITLE属性

2 个答案: