Question

有没有办法禁用css中<a>标记的工具提示？

Answer 1

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

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

我使用了一些jQuery来删除＆＃34; Title＆＃34;标记，但仅限鼠标悬停。一旦鼠标退出，＆＃34;标题＆＃34;标签已恢复。

以下是DIV与一些＆＃34; Title＆＃34;含量：

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

现在，您必须运行以下jQuery来隐藏鼠标悬停时的Title标记：

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

Answer 2

我知道这是一个老问题，但与此同时，通过CSS可以实现这一点：

pointer-events: none;

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

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

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

});

Answer 4

$（类名）.attr（＆＃34;标题＆＃34;＆＃34;＆＃34）;

using属性将搜索标题并替换为＆＃34;＆＃34;（空）。试试这个，当你悬停时不会显示工具提示。

Answer 5

您可以将其设置为仅在悬停时删除title属性，然后重新添加。这使得您的搜索引擎优化保持相同，但悬停时没有工具提示文本。

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

Answer 6

这不是使用CSS的解决方案，但有时可能会有所帮助，我将其用作解决方法：将“ title”属性添加为标记中的空白，或者添加任何您不想看到标题弹出的标记。 请记住，这将破坏盲人或视觉上有缺陷的人的页面可读性。

示例：

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

Answer 7

我担心这是不可行的。但是，您可以使用Javascript删除链接的标题，这可能允许您执行您想要的操作：

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

应该这样做。

Answer 8

$('a[title]').each(function (index, el) {
var $tooltip = $('<div class="overlay-' + index + '" />')
                     .css({
                        position: "absolute"
                        , background: "url('../Images/space.gif')"
                        , width: $(el).width()
                        , height: $(el).height()
                        , top: 0
                        , left: 0
                        , zIndex: 300
                        , border: "1px solid red"
                     })
                     .on('click', function (event) {
                         $(el).click();
                     });
$(this).after($tooltip);

}）

Answer 9

不幸的是，没有纯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属性。这样默认的浏览器工具提示将不会显示在悬停上。

代码段中的链接带有标题，但是工具提示不会在悬停时显示。（检查）

Answer 10

只需将此代码粘贴到<body>中<script>标记的底部即可。

此代码使用jQuery：

$('.titleHidden').removeAttr('title');

然后，当您要隐藏其工具提示时，需要将CSS类titleHidden添加到每个a标记。

使用css禁用工具提示

10 个答案: