如何以跨瀏覽器的方式阻止默認工具提示展示？

我聽到它很難但可能。我只是想做它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

如何以跨瀏覽器的方式阻止默認工具提示展示？

回答

相關問題