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

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以读取新的属性名称而不是title.

更新:

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

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

你可以使用我上面提到的data(...)方法在jQuery的方法中存储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'));
    });
});

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 删除标题属性的内容，或将其移动到其他参数中以供以后使用。

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

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