使用CSS禁用工具提示

Question

有没有一种方法可以在CSS中禁用<a>标签的工具提示？

- Varada

---

你不能在CSS中禁用工具提示。但是如果你不想要工具提示，那么你应该避免编写<a>标签的title属性。 - Ketan Modi

不要忘记，标题标签也是为了可访问性而存在的。话虽如此，像@Ronak所提到的那样没有标题标签，也会实现你想要的效果。 - Cthos

移除 title 属性也会对 SEO 产生影响。 - Craig Tullis

Answer 1

我不知道你想禁用工具提示的原因是什么，但我自己也遇到了同样的问题。

我试图在CSS中创建一个气泡工具提示，但浏览器的工具提示总是出现并搞砸一切。所以，像你一样，我需要禁用默认的工具提示。

我使用了一点jQuery来删除"Title"标签，但只在鼠标悬停时。一旦鼠标移开，"Title"标签就会恢复。

以下是一个带有一些"Title"内容的DIV：

<div class="tooltip-class" title="This is some information for our tooltip.">
  This is a test
</div>

现在，您需要运行以下jQuery代码以在鼠标悬停时隐藏标题标签:

现在，你需要运行下面的jQuery代码，以在鼠标悬停时隐藏标题标签：

$(document).ready(function(){
  $(".tooltip-class").hover(function(){
    $(this).attr("tooltip-data", $(this).attr("title"));
    $(this).removeAttr("title");
  }, function(){
    $(this).attr("title", $(this).attr("tooltip-data"));
    $(this).removeAttr("tooltip-data");
  });
});

请注意，这段jQuery代码是在jQuery版本1.6.4的环境中测试过的。

以下是完整示例的链接:

http://jsfiddle.net/eliasb/emG6E/54/

- DrupalFever

---

我最喜欢这个技巧，因为标题被保留了！ - mtness

Answer 2

我知道这是一个老问题，但现在可以通过CSS来实现：

pointer-events: none;

请注意，这也禁用了点击功能！这正是我所需要的，但OP可能不是这种情况。

cfr https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

- Steven De Groote

---

这个方法非常有效，但有一个很大的问题 - 通常你希望<a>标签是可点击的：但这会同时禁用工具提示和链接功能！ - Nick Rice

注意：这也会禁用CSS光标：https://jsfiddle.net/1qwhp703/ - 如果您知道“指针事件（单击、拖动、悬停等）”的定义，那么这是显而易见的。https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Disabling_pointer_events_on_all_images - WoodrowShigeru

Answer 3

<link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>


$(function(){

    $('*').tooltip({ track: true });

    $('*[title]').tooltip('disable');

});

- user5940280

Answer 4

这并不是使用CSS的解决方案，但有时可能会有所帮助。我用它作为一种解决方法：在标签中添加“title”属性，并将其设置为空，或者你想要看到没有标题弹出的任何标签。

请记住，这会破坏对视力受损或视觉缺陷的人阅读页面的可读性。

示例：

<div title>This will have no title popping up, even if parent tag is setting a title</div>

- BlondCode

Answer 5

你可以使得title属性在悬停时被独立移除，然后再重新添加。这样可以保持SEO的一致性，但是在悬停时不会出现提示文本。

$('a[title]').on('mouseenter', function () {
   var $this = $(this);
   $this.attr('title-cache', $this.attr('title'));
   $this.attr('title', '');
});

$('a[title]').on('mouseleave', function () {
   var $this = $(this);
   $this.attr('title', $this.attr('title-cache'));
   $this.attr('title-cache', '');
});

- dev

Answer 6

很遗憾，没有纯CSS的解决方案。如果有人寻找一个仅基于DOM的解决方案（不使用jQuery）。

document.querySelectorAll('a[href]').forEach(el => {
  el.setAttribute('data-title-cache', el.textContent.trim() || el.getAttribute('href'));
  el.setAttribute('title', el.getAttribute('data-title-cache'));
  el.addEventListener('mouseenter', (e) => {
    el.setAttribute('title', '');
  });
  el.addEventListener('mouseleave', (e) => {
    el.setAttribute('title', el.getAttribute('data-title-cache'));
  });
});

<a href="/link/to/some/thing"> This is a link </a>

你只需要粘贴这段代码。脚本从文本内容或在 a 标签中找到的 href 设置标题。然后在鼠标悬停时删除 title 属性，以便浏览器默认工具提示不会在悬停时显示。

代码片段中的链接有一个标题，但悬停时不会显示工具提示。（检查并确认）

- samuellawrentz

Answer 7

对我来说，答案是使用jQuery。通过在jQuery脚本中将空字符串（“”）设置为属性“title”，当鼠标悬停在div上时，工具提示消失了。

HTML：

<div title="Text in tooltip." class="tooltip-class"> This is a test </div>

jQuery：

$(document).ready(function(){ 
   $(".tooltip-class").attr("title"," ");
});

- Bibily Bob Joe

Answer 8

恐怕那是不可行的。但是，您可以使用JavaScript来剥离链接的标题，这可能允许您实现您想要的功能：

document.getElementById('aid').title = "";

应该能解决问题。

- Winfield Trail

Answer 9

$(.classname).attr("title","");

使用attribute将搜索标题并替换为""（空）。尝试这样做，当您悬停时，工具提示将不会显示。

- Franklin Benjmin

---

也许真正的解决方案是一开始就不写标题。您应该将此添加到您的答案中。但是，如果用户无法控制HTML内容，则您的解决方案是可以接受的。 - Pablo Jomer

@PabloKarlsson 省略标题属性会对SEO和可用性产生负面影响。 - Craig Tullis

Answer 10

这取决于你为什么需要 title 属性。

如果你需要它用于屏幕阅读器，但又不想在悬停时显示工具提示，你可以使用：

<a href="gosomewhere.com" aria-Label="这是一个链接到gosomewhere.com的链接">测试</a>

- Red