如何使用jQuery在浏览器中禁用工具提示？

当将鼠标hover在已填充属性“title”的元素上时，有没有办法禁用浏览器工具提示？ 请注意，我不想删除标题内容。 这是代码请求：

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

并在asp.net

   <a class="clickableSticky" href="#" title=' '>    

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 。

更新：

您可以使用的一个有趣的想法是，当hover在元素上时“懒洋洋地”删除标题。 当用户将元素hover时，您可以返回标题值。

这并不像应该的那样简单，因为如果将title属性设置为null或删除title属性，IE不会正确删除hover事件上的工具提示。 但是，如果在hover时将工具提示设置为空字符串（ "" ），它将从包括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

由于我需要在另一个操作（如复制屏幕或选择颜色）中使用此function，因此我的解决方案包含在该操作开始时和结束时要调用的两个函数：

 $.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中的图像），并且只要将鼠标hover在内部元素（图像！）上就会出现mouseOut

但是，当使用mouseMove时，您应该注意，因为事件会多次触发。 为避免擦除保存的数据，请先检查标题是否为空！

RemoveTitles中的最后一行尝试从鼠标单击或快捷键上调用结束时鼠标未退出的元素中恢复标题。