如何更改锚标签内标题属性的样式？
Posted
技术标签:
【中文标题】如何更改锚标签内标题属性的样式？【英文标题】：How to change the style of the title attribute inside an anchor tag? 【发布时间】：2012-04-13 05:36:12 【问题描述】：例子：
<a href="example.com" title="My site"> Link </a>
如何更改浏览器中“title”属性的显示方式？默认情况下，它只有黄色背景和小字体。我想让它变大并改变背景颜色。
有没有 CSS 方法来设置 title 属性的样式？
【问题讨论】：
***.com/questions/36275678/how-to-create-a-tooltip 我做了一个小脚本，叫做title-tooltips 【参考方案1】：似乎实际上有一个纯 CSS 解决方案，只需要 css attr 表达式、生成的内容和属性选择器（这表明它可以追溯到 IE8）：
https://jsfiddle.net/z42r2vv0/2/
a
position: relative;
display: inline-block;
margin-top: 20px;
a[title]:hover::after
content: attr(title);
position: absolute;
top: -100%;
left: 0;
<a href="http://www.google.com/" title="Hello world!">
Hover over me
</a>update w/@ViROscar 的输入：请注意，没有必要使用任何特定属性，尽管我在上面的示例中使用了“title”属性；实际上，我的建议是使用“alt”属性，因为无法从 CSS 中受益的用户可能会访问内容。
再次更新我没有更改代码，因为“title”属性基本上意味着“tooltip”属性，在字段中隐藏重要文本可能不是一个好主意只能在悬停时访问，但如果您有兴趣使此文本可访问，“aria-label”属性似乎是它的最佳位置：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
【讨论】：
如果您不希望原生工具提示最终也显示出来，您可以随时使用“alt”标签.. @Jonz 我尝试使用自定义属性“data-alt='alt'”，一切正常。不需要使用 alt 或 title 属性。 Pure CSS Tooltips 有严重的缺点——它们被绑定到元素，因此绑定到它的stacking context。除了static 之外，所有带有position 的元素都会创建新的堆叠上下文，并且纯CSS 工具提示在外部是不可见的，也不能超出这样的堆叠上下文，所以如果你有紧位置为 relative 的元素，您的 CSS 工具提示将不可见。唯一的解决方案是将工具提示附加到需要 javascript 的顶部 stacking context（例如 <body>）。
不幸的是它不会在点击时消失。
我知道这是一个很老的回复，但这是我发现的唯一一个真正有用的回复。我建议使用 aria-label instad of alt 或 title，因为它不需要任何成本，而且它会帮助人们获得可访问性..【参考方案2】：
下面是一个例子：
a.tip
border-bottom: 1px dashed;
text-decoration: none
a.tip:hover
cursor: help;
position: relative
a.tip span
display: none
a.tip:hover span
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
left: 0px;
margin: 10px;
width: 250px;
position: absolute;
top: 10px;
text-decoration: none
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>【讨论】：
在 FF 中不能正常工作，如果使用 a 标签而不是标签，例如 td 请参阅sixrevisions.com/css/css-only-tooltips 以获取上述技术的示例，并附有详细说明。 当我这样做时，我看到一个双工具提示。有样式的，然后不久之后，无样式的会出现在这个上面。这是你的小提琴。我正在使用铬。这是异常吗？ 在代码中没有标题属性的答案在这里有超过 100 个赞...？ 甚至没有解决实际问题...嘘！【参考方案3】：您不能为实际的 title 属性设置样式
title 属性中的文本如何显示由浏览器定义，并且因浏览器而异。网页无法根据title 属性对浏览器显示的工具提示应用任何样式。
但是，您可以使用其他属性创建非常相似的内容。
您可以使用 CSS 和自定义属性（例如 data-title）制作伪工具提示
为此，我将使用data-title 属性。 data-* attributes 是一种将自定义数据存储在 DOM 元素/html 中的方法。有multiple ways of accessing them。重要的是，它们可以由 CSS 选择。
鉴于您可以使用 CSS 选择具有 data-title 属性的元素，然后您可以使用 CSS 创建包含使用 attr() 的属性值的 :after（或 :before）content。
样式化工具提示示例
更大且背景颜色不同（根据问题要求）：
[data-title]:hover:after
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
[data-title]:after
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
[data-title]
position: relative;
<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip更精细的样式（改编自this blog post）：
[data-title]:hover:after
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
[data-title]:after
content: attr(data-title);
position: absolute;
bottom: -1.6em;
left: 100%;
padding: 4px 4px 4px 8px;
color: #222;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
opacity: 0;
z-index: 99999;
visibility: hidden;
[data-title]
position: relative;
<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip已知问题
与真正的 title 工具提示不同，上述 CSS 生成的工具提示不一定保证在页面上可见（即它可能在可见区域之外）。另一方面，它保证在当前窗口内，实际的工具提示并非如此。
此外，伪工具提示相对于具有伪工具提示的元素定位，而不是相对于鼠标在该元素上的位置。您可能需要微调伪工具提示的显示位置。将其显示在相对于元素的已知位置可能是有利也可能是不利，具体取决于具体情况。
您不能在不是容器的元素上使用:before 或:after
this answer to "Can I use a :before or :after pseudo-element on an input field?"有很好的解释
实际上，这意味着您不能直接在 <input type="text"/>、<textarea/>、<img> 等元素上使用此方法。简单的解决方案是将不是容器的元素包装在 <span> 中或 <div> 并在容器上显示伪工具提示。
在 <span> 上使用伪工具提示包装非容器元素的示例：
[data-title]:hover:after
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
[data-title]:after
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
[data-title]
position: relative;
.pseudo-tooltip-wrapper
/*This causes the wrapping element to be the same size as what it contains.*/
display: inline-block;
Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type="text""><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>从上面链接的博客文章中的代码（我第一次在这里看到抄袭它的答案），对我来说使用data-* 属性而不是title 属性似乎很明显。 snostorm 在该（现已删除）答案的评论中也建议这样做。
【讨论】：
这可能不是问题的答案，但这是迄今为止最好的解决方案。谢谢。 @JJLabajo 感谢您对这是迄今为止最好的解决方案的补充。但是，我不确定这如何不能回答这个问题。问题是要求一些不可能的事情。这个答案说这是不可能的，但提供了一种替代方案，可以完成类似于 OP 期望的事情。 我认为这个解决方案不适用于input[type='text'] 或textarea 这样的元素，但我不知道为什么。谁能解释一下？
@Cheeso 你说得对，:before 和 :after 伪元素不适用于非容器元素。答案中有一个很好的解释：Can I use a :before or :after pseudo-element on an input field? 要使用此方法，将不是容器的元素包装在 <span> 或 <div> 中可能是最简单的方法，您可以在其中放置 data-title 属性。您可能还想给它们display: inline-block;，因为这会使它们的大小与<input> 或<textarea> 相同。我已经用一个例子更新了这个答案。
这个答案实际上告诉我们发生了什么，并提供了各种结构良好的背景信息。【参考方案4】：
CSS 无法更改工具提示的外观。它取决于浏览器/操作系统。如果你想要一些不同的东西，当你将鼠标悬停在元素而不是默认的工具提示上时，你必须使用 Javascript 来生成标记。
【讨论】：
一个人没有有用JS来做。 “你不能”答案的风险在于它们可能会过时。 （另一个风险是你不知道怎么做。）【参考方案5】：我在这里找到了答案：http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
我自己的代码是这样的，我已经更改了属性名称，如果您保留属性的标题名称，您最终会有两个相同文本的弹出窗口，另一个变化是我的悬停文本显示在暴露的文本下方.
.tags
display: inline;
position: relative;
.tags:hover:after
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: -34px;
color: #fff;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
.tags:hover:before
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
<a class="tags" gloss="Text shown on hovering">Exposed text</a>【讨论】：
【参考方案6】：我想我会在这里发布我的 20 行 JavaScript 解决方案。它并不完美，但可能对某些人有用，具体取决于您对工具提示的需求。
何时使用
为所有定义了TITLE 属性的 HTML 元素自动设置工具提示样式（这包括将来动态添加到文档中的元素）
每个工具提示都不需要 Javascript/HTML 更改或 hack（只需 TITLE 属性，语义清晰）
非常轻巧（压缩和缩小后增加了大约 300 字节）
您只需要一个非常基本的可样式化工具提示
何时不使用
需要jQuery，所以不使用jQuery的请不要使用 对具有工具提示的嵌套元素的支持不佳 您需要同时在屏幕上显示多个工具提示 您需要工具提示在一段时间后消失代码
// Use a closure to keep vars out of global scope
(function ()
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e)
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css(
position: "absolute", top: ntop, left: nleft
).show();
;
$(document).on("mouseenter", "*[title]", function (e)
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
);
$(document).on("mouseleave", "." + CLS_ON, function (e)
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
);
if (FOLLOW) $(document).on("mousemove", "." + CLS_ON, showAt);
());
将它粘贴到任何地方，即使您在 DOM 准备好之前运行此代码也应该可以工作（在 DOM 准备好之前它不会显示您的工具提示）。
自定义
您可以更改第二行的var 声明以对其进行一些自定义。
var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor
风格
您现在可以使用以下 CSS 设置工具提示的样式：
#tooltip
background: #fff;
border: 1px solid red;
padding: 3px 10px;
【讨论】：
效果很好！可以在这里找到一个小错误的修复（如果标题为空）：***.com/questions/26702472/… 如果你在一个元素上快速移动，我会得到一个空的工具提示，即使上面提到了错误修复。这是不稳定的，如果我取下 $(this).removeAttr("title") 就会停止。但当然，我会在一段时间后获得标准帮助。【参考方案7】：自定义工具提示模式的 jsfiddle 是 Here
它基于 CSS 定位和伪类选择器
检查MDN docs 是否支持伪类的跨浏览器
<!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a> a developer.
</p>
/*CSS*/
a.tooltip
position: relative;
a.tooltip span
display: none;
a.tooltip:hover span, a.tooltip:focus span
display:block;
position:absolute;
top:1em;
left:1.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
【讨论】：
【参考方案8】：原生工具提示无法设置样式。
话虽如此，您可以使用一些库来在元素悬停时显示样式浮动层（而不是本机工具提示，并抑制它们），需要很少或不需要代码修改...
【讨论】：
如果元素具有title 属性，我认为您无法抑制原生工具提示。因此，如果您设置自己的工具提示实现，最好使用其他属性（例如，data-tip）而不是title。
可以，如果在附加到事件后清除标题属性
我明白你的意思，但这不是关于样式化原生工具提示；这是为了避免它们（通过修改 DOM）。
@JukkaK.Korpela 是的，我在第一句话中说这是不可能的 ;)
使用 title 属性并在以后清除它的好处是，如果用户禁用了 JavaScript，工具提示仍然可用。【参考方案9】：
您无法设置默认浏览器工具提示的样式。但是您可以使用 javascript 创建自己的自定义 HTML 工具提示。
【讨论】：
【参考方案10】：a[title="My site"]
color: red;
这也适用于您要添加的任何属性，例如：
HTML
<div class="my_class" anything="whatever">My Stuff</div>
CSS
.my_class[anything="whatever"]
color: red;
查看它的工作原理：http://jsfiddle.net/vpYWE/1/
【讨论】：
对具有指定标题的元素进行样式化；不是浏览器显示的工具提示标题 另外，anything 不是有效的 HTML 属性。对于自定义属性，请使用 data- 属性。以上是关于如何更改锚标签内标题属性的样式？的主要内容，如果未能解决你的问题，请参考以下文章