Html 使用 css 禁用工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5762244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable tooltips using css
提问by Varada
Is there a way to disable the tooltips of the <a>tag in css?
有没有办法禁用<a>css中标签的工具提示？
采纳答案by Farzin Zaker
Just paste this code at the bottom of your <body>tag in a <script>.
只需将此代码粘贴到<body>标签底部的<script>.
This code uses jQuery:
此代码使用 jQuery：
$('.titleHidden').removeAttr('title');
Then you need to add the CSS class titleHiddento each atag when you want to hide its tooltip.
然后，当您想要隐藏其工具提示时，您需要将 CSS 类添加titleHidden到每个a标签。
回答by DrupalFever
I don't know what is your reason for wanting to disable tool-tips but I've run into the same problem myself.
我不知道您想要禁用工具提示的原因是什么，但我自己也遇到了同样的问题。
I was trying to create a bubble tool-tip in CSS but the browser tool-tip would always appear and mess things up. So, like you, I needed to disable the default tool-tip.
我试图在 CSS 中创建一个气泡工具提示，但浏览器工具提示总是会出现并把事情搞砸。所以，和你一样，我需要禁用默认的工具提示。
I used a bit of jQuery to remove the "Title" tag but only on mouse hover. As soon as the mouse is out, the "Title" tag is restored.
我使用了一些 jQuery 来删除“标题”标签，但只在鼠标悬停时。一旦鼠标离开，“标题”标签就会恢复。
Following is a DIV with some "Title" content:
以下是带有一些“标题”内容的 DIV：
<div class="tooltip-class" title="This is some information for our tooltip.">
This is a test
</div>
Now, you will have to run the following jQuery to hide the Title tag on mouse hover:
现在，您必须运行以下 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");
});
});
Note that this jQuery code was tested in an environment with jQuery Version 1.6.4.
请注意，此 jQuery 代码在 jQuery 版本 1.6.4 的环境中进行了测试。
Following is a link to the full example:
以下是完整示例的链接：
回答by Steven De Groote
I know this is an old question, but in the meantime this has become possible via CSS like this:
我知道这是一个老问题，但与此同时，通过像这样的 CSS 使这成为可能：
pointer-events: none;
Note however that this also disabled the clicking ability! It was what I needed, but may not be the case for the OP.
但是请注意，这也禁用了点击功能！这是我所需要的，但对于 OP 而言可能并非如此。
cfr https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
cfr https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
回答by Steven De Groote
<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');
});
回答by BlondCode
It is not a solution using CSS but sometimes may help and i used this as a workaround: add "title" attribute as being empty in the tag or whichever tag you wanna see no titles popping up. Keep in mind that it will ruin the readability of the page for people who are blind or have some defects in their visual senses.
这不是使用 CSS 的解决方案，但有时可能会有所帮助，我将其用作解决方法：在标签中添加“title”属性为空，或者添加任何您不想看到标题弹出的标签。 请记住，对于盲人或视觉上有一些缺陷的人来说，它会破坏页面的可读性。
Example:
例子：
<div title>This will have no title popping up, even if parent tag is setting a title</div>
回答by dev
You can make it so that the titleattribute is removed exclusively on hover, and then re-added. This makes it so that your SEO remains identical, but there is no tooltip text when hovering.
您可以设置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', '');
});
回答by Winfield Trail
I'm afraid that just isn't feasible. You can, however, use Javascript to strip out a link's title which may allow you to do what you want:
恐怕这是行不通的。但是，您可以使用 Javascript 去除链接的标题，这样您就可以执行所需的操作：
document.getElementById('aid').title = "";
should do the trick.
应该做的伎俩。
回答by Franklin Benjmin
$(.classname).attr("title","");
using attribute will search the title and replaces with ""(empty). Try this and tool tip will not be show when you hover.
using 属性将搜索标题并替换为“”（空）。试试这个，当你悬停时工具提示不会显示。
回答by samuellawrentz
Unfortunately there is no pure CSS solution. If anyone looking for a DOM only solution (without jQuery)
不幸的是，没有纯 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>You just have to paste this code. The script sets the title from the text content or the href found in the atag. Then removes the titleattribute on mouse hover. So that the default browser tooltip would not be displayed on hover.
你只需要粘贴这个代码。该脚本根据文本内容或a标签中的 href 设置标题。然后删除title鼠标悬停时的属性。这样默认浏览器工具提示就不会在悬停时显示。
The link in the code snippet has a title but the tooltip won't be displayed on hover. (Inspect and check)
代码片段中的链接有标题，但工具提示不会在悬停时显示。（检查和检查）
回答by Dathan
$('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);
})
