如何以跨浏览器的方式阻止默认工具提示展示？

我听到它很难但可能。我只是想做它cauz我使用下面的jquery代码，以避免缓慢和非常小的默认提示showup（标题和alt属性在一个& img标签）。如何以跨浏览器的方式阻止默认工具提示展示？

$(function() { 
$('a').hover(function(e) { 
     e.preventDefault(); 
    if(this.title > '') 
     { 
    this.t = this.title; 
    // this.title = ''; 
    $(this).append("<span id='tooltip'>"+ this.t +"</span>"); 
    $("#tooltip") 
     .css("top",(e.pageY - 20) + "px") 
     .css("left",(e.pageX + 3) + "px") 
     .fadeIn("fast"); 

     } 
    }, 
    function() { 
    $(this).find("span:last").remove(); 
    } 
); 
});

现在，如果我释放//this.title ='';在代码中 - 它工作，但工具提示只运行一次，在下一次悬停时没有重播。

任何想法如何覆盖？谢谢。

来源

2012-03-22 Xfile

你就不能设置标题在读取其值后清空？例如（未经测试）这可能工作？ 'this.t = this.data（'title'）= this.attr（“title”）|| this.attr（ “标题”）; this.attr（“title”，“”）;'..嗯，你需要修正或稍微修改title属性，然后删除它。 – frumbert 2012-03-22 02:13:49

是的，但第二个想法..我认为这可能会工作（与this.title ='';）！如果你只显示一次tooltip，用户我最后会问自己这个提示实际上说了些什么lol：D ps：如果它没有被删除 - 就像我测试的那样 - tooltip一直显示为副本（这里和那里，并不总是，但有时）。但是我检查出来！ – Xfile 2012-03-22 02:23:06

@Joseph我重新考虑了我的答案...... IMO好得多。 – Kyle 2012-03-22 03:01:51

编辑：example jsFiddle

我喜欢qTip但如果你想推出自己的代码，我会做到这一点...

$(function(){ 
    // remove all titles and create tooltip span 
    $('a[title]').each(function(){ 
    var s = $("<span class='tooltip'>"+ this.title +"</span>").hide(); 
    $(this).append(s).removeAttr("title"); 
    }); 

    // setup hover functions 
    // tooltip spans are already present 
    // we just need to position and show them or hide them 
    $('a').hover(function(e){ 
    $(this).find("span.tooltip").css({ 
     top: (e.pageY - 20) + "px", 
     left: (e.pageX + 3) + "px" 
    }).fadeIn("fast"); 
    }, 
    function(){ 
    $(this).find("span.tooltip").fadeOut("fast"); 
    }); 
});

来源

2012-03-22 02:37:05 Kyle

刚刚触发了这个糟糕的浏览器，代码就像一个魅力！ THAAAAAAANX：D PS：只是想知道你是否在意添加一些div id（也带有“a”标签），所以我可以在一些div上使用这个特性？ – Xfile 2012-03-22 03:02:52

只需修改选择器以在其他元素上使用它。 I.E. '$（'a，div＃your_id'）。hover（func ...'和'$（'a [title]，div [title]'）。 – Kyle 2012-03-22 03:04:24

忽略我最后的答案，我刚完成了一个Moosehead。

$('a').hover(function(e) { 
     e.preventDefault(); 
     var title = $(this).attr('title'); 

     // assign the original title to the "tt" attribute 
     $(this).attr('tt', title); 

     $(this).removeAttr('title'); 
     $(this).append("<span id='tooltip'>" + title + "</span>"); 

     $("#tooltip").css("top", (e.pageY - 20) + "px").css("left", (e.pageX + 3) + "px").fadeIn("fast"); 
    }, function() {  

     // assign it back to what it was 
     $(this).attr('title', $(this).attr('tt')); 

     $(this).find("span:last").remove(); 
    } 
};

来源

2012-03-22 02:30:52 Terry

如何以跨浏览器的方式阻止默认工具提示展示？

回答

相关问题