示例：
<a href="example.com" title="My site"> Link </a>
如何在浏览器中更改“title”属性的显示？默认情况下，它只有黄色背景和小字体。我想把它变大，改变背景颜色。
是否有CSS方式来设置title属性的样式？
答案 0 :(得分：114)
以下是如何操作的示例：
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>
答案 1 :(得分：93)
似乎实际上有一个纯CSS解决方案，只需要css attr表达式，生成内容和属性选择器（这表明它可以像IE8一样工作）：
a[title]:hover:after {
content: attr(title);
position: absolute;
}
来源：https://jsfiddle.net/z42r2vv0/2/
来自@ViROscar的输入更新：请注意，虽然我在上面的示例中使用了“title”属性，但没有必要使用任何特定属性。实际上我的建议是使用“alt”属性，因为有可能无法从CSS中受益的用户可以访问内容。
再次更新我没有更改代码，因为“title”属性基本上意味着“工具提示”属性，并且在字段中隐藏重要文本可能不是一个好主意仅在悬停时可访问，但如果您有兴趣使此文本可访问，则“aria-label”属性似乎是最适合它的地方：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
答案 2 :(得分：26)
title属性如何显示title属性中的文本是由浏览器定义的，因浏览器而异。网页无法将任何样式应用于浏览器根据title属性显示的工具提示。
但是，您可以使用其他属性创建非常相似的内容。
data-title）为此，我使用data-title属性。 data-* attributes是一种在DOM元素/ HTML中存储自定义数据的方法。有multiple ways of accessing them。重要的是，它们可以通过CSS选择。
鉴于您可以使用CSS选择具有data-title属性的元素，您可以使用CSS创建包含值:after（或:before）content的attr()使用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);
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
更精细的样式（改编自snostorm）：
[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生成的工具提示不一定保证在页面上可见（即它可能在可见区域之外）。另一方面，它保证在当前窗口内，而不是实际工具提示的情况。
从上面链接的博客文章中的代码（我在这里抄袭它的答案中首次看到），我很明显使用data-*属性而不是{{1} }属性。 {{3}}对该（现已删除）答案的评论也提出了这样做。
答案 3 :(得分：25)
CSS无法更改工具提示外观。它取决于浏览器/操作系统。如果你想要不同的东西，当你将鼠标悬停在元素上而不是默认的工具提示时，你将不得不使用Javascript来生成标记。
答案 4 :(得分：11)
我以为我会在这里发布我的20行JavaScript解决方案。它并不完美，但根据您的工具提示需要，可能对某些人有用。
何时使用
TITLE属性的HTML元素的工具提示样式（包括将来动态添加到文档中的元素）TITLE属性，语义清晰）何时不使用
代码
// 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;
}
答案 5 :(得分：7)
自定义工具提示模式的jsfiddle是Here
它基于CSS Positioning和pseduo类选择器
检查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;
}
答案 6 :(得分：7)
我在这里找到答案：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(glose);
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" glose="Text shown on hovering">Exposed text</a>
答案 7 :(得分：5)
原生工具提示无法设置样式。
话虽这么说，你可以使用一些库，当元素被悬停时显示样式浮动层（而不是原生工具提示，并禁止它们）需要很少或不需要代码修改......
答案 8 :(得分：2)
您无法设置默认浏览器工具提示的样式。但您可以使用javascript创建自己的自定义HTML工具提示。
答案 9 :(得分：0)
a[title="My site"] {
color: red;
}
这也适用于您要添加的任何属性：
HTML
<div class="my_class" anything="whatever">My Stuff</div>
CSS
.my_class[anything="whatever"] {
color: red;
}