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以读取新属性名称而不是{{1 }}

<强>更新

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

这并不像应该的那样简单，因为如果将title属性设置为title或删除title属性，IE不会正确删除悬停事件上的工具提示。但是，如果您在悬停时将工具提示设置为空字符串（null），它将从包括Internet Explorer在内的所有浏览器中删除工具提示。

您可以使用我上面提到的方法将title属性存储在jQuery的""方法中，然后将其放回data(...)。

mouseout

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 搜索谷歌似乎表明这是一个常见的问题 - 这只发生在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以使用重命名的标题属性。

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

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

RemoveTitles中的最后一行，在mouseClick或快捷键上调用end时，尝试从鼠标未退出的元素中恢复标题。

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

7 个答案: