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

当鼠标悬停在已填充属性“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>

---

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

这意味着你失去了一些可访问性

RE:ClueTip

---

谷歌搜索似乎表明这是一个普遍的问题——这是否只发生在IE中？ClueTip在FireFox中似乎可以正常工作。

您可以在页面加载时删除

title

属性

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

如果以后需要使用标题，可以将其存储在元素的jQuery

data（）

中

另一个选项是将

title

属性的名称更改为

aTitle

，或者浏览器将忽略的其他名称，然后更新任何JavaScript以读取新属性名称，而不是

title

更新：

您可以使用一个有趣的想法，即在将鼠标悬停在元素上时“懒散地”删除标题。当用户将鼠标悬停在元素之外时，可以将标题值放回原处

这并不像应该的那样简单，因为如果您将title属性设置为

null

或删除title属性，IE不会正确删除悬停事件上的工具提示。但是，如果将鼠标悬停时的工具提示设置为空字符串（

“

”），它将从包括Internet Explorer在内的所有浏览器中删除工具提示

您可以使用我上面提到的方法将title属性存储在jQuery的

数据（…）

方法中，然后将其放回

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'));
    });
});

---

升级

ClueTip

以使用重命名的title属性。

以下是现代jQuery方法（IMO）

…当然，读回

title

属性是通过

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

---

根据Dan Herbert的上述建议，以下是代码：

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

---

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

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

$.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中的最后一行尝试从元素中还原标题，在鼠标单击或快捷键上调用end时，鼠标没有从该元素退出。

很酷的片段，没有真正思考过我该如何做，但我喜欢这种方法的简单性，这就是我目前正在做的，存储在描述字段中，但我想我可以把它放在标题中，忽略它如果你想把标题保留在那里，这是行不通的。这很可能会破坏视障人士的屏幕阅读器。就好像屏幕阅读器无论如何都要解释Javascript一样。。。？来吧，大家！屏幕阅读器非常能够处理JavaScript。但是，可以安全地假设它们永远不会触发

悬停

事件，因此在悬停时损坏标题是合法的。我不想删除标题属性。我正在使用'Cluetip'插件，我需要title属性。问题是，在cluetip出现之前，丑陋的黄色工具提示会出现一秒钟。@epitka-你们可以在问题中提到它。对不起，在我发布后，我注意到了它并对其进行了修改。您可以更新您的原始问题，声明-您不需要将其作为注释发布：）在Cluetip启动之前，哪个浏览器正在显示浏览器工具提示？我已经在Safari、Chrome、IE8（和7 compat.）、Firefox和Opera中进行了测试，没有发现任何问题。您有任何代码的链接吗？您使用什么属性填充cluetip内容？如果您使用title属性，那么当鼠标悬停在……上时，它将禁用标题的显示。我使用了设置，似乎只有当cluetip的激活设置设置为click时才会出现这种情况。如果它在悬停时激活，则会工作，但如果在单击时激活，则会显示工具提示。

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

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);
});

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