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

當鼠標懸停在具有屬性「標題」的元素上時，是否有方法禁止顯示瀏覽器工具提示？請注意，我不想刪除標題內容。這裏是代碼請求：如何使用jQuery禁用瀏覽器中的工具提示？

$(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>

來源

2009-06-22 epitka

您可以更新您的原始問題，聲明 - 您不需要將其作爲評論發佈:) – Sampson 2009-06-22 15:40:01

什麼瀏覽器在Cluetip啓動之前顯示瀏覽器工具提示？我已經在Safari，Chrome，IE8（和7 compat。），Firefox和Opera中進行了測試，沒有發現任何我可以注意到的問題。 – 2009-06-22 15:47:52

你有鏈接到你的任何代碼？ – 2009-06-22 16:31:49

你可以使用jQuery去掉標題attribte的內容，或將其移動到供以後使用其他一些參數。

這確實意味着你失去了一些輔助功能。

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

來源

2009-06-22 15:14:15

您可以在頁面加載時刪除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。

更新：

你可以使用一個有趣的想法是「懶惰」去掉標題懸停在一個元素時。當用戶懸停元素時，您可以將標題值放回。

這不像應該那樣直截了當，因爲如果您將標題屬性設置爲null或刪除標題屬性，IE不會正確刪除懸停事件上的工具提示。但是，如果在懸停時將工具提示設置爲空字符串（""），則會從包括Internet Explorer在內的所有瀏覽器中刪除工具提示。

您可以使用我上面提到的方法在jQuery的data(...)方法中存儲title屬性，然後將它放回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')); 
    }); 
});

來源

2009-06-22 15:15:14

駭客ClueTip使用重命名的標題屬性。

來源

2009-06-22 16:54:55 Detect

這裏是現代 jQuery的方式做到這一點（IMO）...

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

......當然，閱讀title屬性背面用做...

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

來源

2011-09-04 01:33:06 alex

按照上面丹·赫伯特的建議，這裏是代碼：

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

來源

2011-12-04 05:27:23 Barka

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); 
});

大家好。我正在使用這種解決方案，它在所有瀏覽器中都能正常工作。

來源

2012-03-03 09:13:33

，因爲我需要這個功能的另一個動作時可用（如複印畫面或挑顏色，）我的解決方案包含了被稱爲兩大功能時動作的開始和何時結束：

$.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中的圖像），並且只要將鼠標懸停在內部元素（圖像！）上，就會發生鼠標移動。

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

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

來源

2015-06-25 17:36:40 horiatu

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

回答

相關問題