如何使用jQuery在瀏覽器中禁用工具提示？

Question

當將鼠標懸停在已填充屬性“title”的元素上時，有沒有辦法禁用瀏覽器工具提示？ 請注意，我不想刪除標題內容。 這是代碼請求：

  $(document).ready(function() {
     $('a.clickableSticky').cluetip({
         splitTitle: '|',
         showTitle: false,
         titleAttribute: 'description',
         activation: 'click',
         sticky: true,
         arrows: true,
         closePosition: 'title'
     });
 });

並在asp.net

  <ItemTemplate>
     <a class="clickableSticky" href="#"
     title=' <%#((Limit)Container.DataItem).Tip %>'>
     <img src="..\App_Themes\default\images\icons\information.png"/>
     </a>

 </ItemTemplate>

Answer 1

您可以在頁面加載時刪除title屬性。

$(document).ready(function() {
    $('[title]').removeAttr('title');
});

如果以后需要使用標題，可以將其存儲在元素的jQuery data() 。

$(document).ready(function() {
    $('[title]').each(function() {
        $this = $(this);
        $.data(this, 'title', $this.attr('title'));
        $this.removeAttr('title');
    });
});

另一個選項是將title屬性的名稱更改為aTitle ，或瀏覽器將忽略的其他內容，然后更新任何JavaScript以讀取新屬性名稱而不是title 。

更新：

您可以使用的一個有趣的想法是“懸停”在懸停在元素上時刪除標題。 當用戶將元素懸停時，您可以返回標題值。

這並不像應該的那樣簡單，因為如果將title屬性設置為null或刪除title屬性，IE不會正確刪除懸停事件上的工具提示。 但是，如果在懸停時將工具提示設置為空字符串（ "" ），它將從包括Internet Explorer在內的所有瀏覽器中刪除工具提示。

您可以使用我上面提到的方法將title屬性存儲在jQuery的data(...)方法中，然后將其放回mouseout 。

$(document).ready(function() {
    $('[title]').mouseover(function () {
        $this = $(this);
        $this.data('title', $this.attr('title'));
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
    }).mouseout(function () {
        $this = $(this);
        $this.attr('title', $this.data('title'));
    });
});

Answer 2

這是現代 jQuery方法（IMO）......

$('[title]').attr('title', function(i, title) {
    $(this).data('title', title).removeAttr('title');
});

...當然，閱讀title屬性是用...完成的

$('#whatever').data('title');

Answer 3

遵循Dan Herbert的上述建議，以下是代碼：

$(element).hover(
    function () {
        $(this).data('title', $(this).attr('title'));
        $(this).removeAttr('title');
    },
    function () {
        $(this).attr('title', $(this).data('title'));
    });

Answer 4

您可以使用jQuery刪除標題attribte的內容，或將其移動到其他參數中供以后使用。

這確實意味着你失去了一些可訪問性。

RE：ClueTip Google的搜索似乎表明這是一個常見問題 - 這只發生在IE中嗎？ ClueTip似乎在FireFox中按預期工作。

Answer 5

function hideTips(event) {  
    var saveAlt = $(this).attr('alt');
    var saveTitle = $(this).attr('title');
    if (event.type == 'mouseenter') {
        $(this).attr('title','');
        $(this).attr('alt','');
    } else {
        if (event.type == 'mouseleave'){
            $(this).attr('alt',saveAlt);
            $(this).attr('title',saveTitle);
        }
   }
}

$(document).ready(function(){
 $("a").live("hover", hideTips);
});

大家好。 我正在使用此解決方案，它適用於所有瀏覽器。

Answer 6

破解ClueTip以使用重命名的title屬性。

Answer 7

由於我需要在另一個操作（如復制屏幕或選擇顏色）中使用此功能，因此我的解決方案包含兩個在該操作開始時和結束時調用的函數：

$.removeTitles = function() {
    $('[title]').bind('mousemove.hideTooltips', function () {
    $this = $(this);
    if($this.attr('title') && $this.attr('title') != '') { 
        $this.data('title', $this.attr('title')).attr('title', '');
    }
  }).bind('mouseout.hideTooltips', function () {
    $this = $(this);
    $this.attr('title', $this.data('title'));
  });
}

$.restoreTitles = function() {
    $('[title]').unbind('mousemove.hideTooltips').unbind('mouseout.hideTooltips');
    $('*[data-title!=undefined]').attr('title', $this.data('title'));
}

無法使用MouseEnter，因為其他元素可以覆蓋標題元素（作為標題div中的圖像），並且只要將鼠標懸停在內部元素（圖像！）上就會出現mouseOut

但是，當使用mouseMove時，您應該注意，因為事件會多次觸發。 為避免擦除保存的數據，請先檢查標題是否為空！

RemoveTitles中的最后一行，嘗試從鼠標單擊或快捷鍵上調用結束時鼠標未退出的元素恢復標題。