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

Posted 2023-05-09

【中文标题】如何使用 jQuery 在浏览器中禁用工具提示？

【英文标题】：How to disable tooltip in the browser with jQuery?

【发布时间】：2010-11-04 21:26:34

【问题描述】：

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

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

【问题讨论】：

您可以更新您的原始问题以声明 - 您无需将其作为评论发布:)

什么浏览器在 Cluetip 启动之前显示浏览器工具提示？我在 Safari、Chrome、IE8（和 7 兼容）、Firefox 和 Opera 中进行了测试，没有发现任何我注意到的问题。

你有任何代码的链接吗？

您使用什么属性来填充线索提示内容？如果你使用 title 属性，那么它会在悬停时禁用标题的显示......

我玩过设置，这似乎只在线索提示的激活设置设置为点击时才会发生。如果它是在悬停时激活的，那么它可以工作，但如果它是在点击时激活的，那么它会显示工具提示。

【参考方案1】：

您可以在页面加载时删除 title 属性。

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

如果以后需要用到标题，可以将其存储在元素的jQuerydata()中。

$(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'));
    );
);

【讨论】：

很酷的 sn-p，并没有真正考虑过我会如何做到这一点，但我喜欢这种方法的简单性

这就是我目前正在做的，存储在描述字段中，但我认为我可以将它放在标题中并忽略它

如果您想将标题保留在那里，这是行不通的。这可能会破坏视障人士的屏幕阅读器。

好像屏幕阅读器无论如何都会解释 Javascript...？来吧，人们！

屏幕阅读器非常有能力处理 JavaScript。但是，可以安全地假设它们永远不会触发 hover 事件，因此在悬停时修改标题是合法的。

【参考方案2】：

这是 现代 jQuery 的实现方式（IMO）...

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

...当然，读回title属性是通过...完成的...

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

【参考方案3】：

按照上面 Dan Herbert 的建议，代码如下：

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

【参考方案4】：

您可以使用 jQuery 删除标题属性的内容，或将其移动到其他参数中以供以后使用。

这确实意味着您失去了一些可访问性。

回复：线索提示 搜索 Google 似乎表明这是一个常见问题 - 这只发生在 IE 中吗？ ClueTip 似乎在 FireFox 中按预期工作。

【讨论】：

我不想删除 title 属性。我正在使用“Cluetip”插件，我需要 title 属性。问题是，在提示提示出现之前，那个丑陋的黄色工具提示会出现一秒钟。

@epitka - 你可能已经提到了这个问题。

不好意思，我发了之后才注意到，修改了

【参考方案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);
);

大家好。我正在使用这个解决方案，它在所有浏览器中都能正常工作。

【参考方案6】：

破解ClueTip 以使用重命名的标题属性。

【参考方案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 中的最后一行，尝试从在 mouseClick 或快捷键上调用 end 时鼠标未退出的元素恢复标题。