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

IT技术 javascript jquery jquery-plugins
2021-02-26 08:57:34

有没有办法在将鼠标悬停在填充了“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>
6个回答

您可以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'));
    });
});
这就是我目前正在做的,存储在描述字段中,但我认为我可以将它放在标题中并忽略它
2021-04-22 08:57:34
屏幕阅读器非常有能力处理 JavaScript。但是,可以安全地假设它们永远不会触发该hover事件,因此在悬停时修改标题是合法的。
2021-04-23 08:57:34
如果您想将标题保留在那里,这是行不通的。这可能会破坏视障人士的屏幕阅读器。
2021-05-02 08:57:34
很酷的片段,并没有真正考虑过我会怎么做,但我喜欢这种方法的简单性
2021-05-04 08:57:34
好像屏幕阅读器无论如何都会解释Javascript......?来人吧!
2021-05-17 08:57:34

这是现代的jQuery 方法(IMO)...

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

...当然,读title回属性是用...完成的

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

按照上面丹赫伯特的建议,这里是代码:

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

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

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

RE:ClueTip 对 Google 的搜索似乎表明这是一个常见问题 - 这仅发生在 IE 中吗?ClueTip 似乎在 FireFox 中按预期工作。

我不想删除 title 属性。我正在使用“Cluetip”插件,我需要标题属性。问题是,在提示提示出现之前,丑陋的黄色工具提示会出现一秒钟。
2021-04-25 08:57:34
对不起,我发帖后我注意到并修改了它
2021-05-02 08:57:34
@epitka - 你可以提到这个问题。
2021-05-16 08:57:34
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);
});

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