如何改变标题属性在一个锚标签的风格?

例子:

<a href="example.com" title="My site"> Link </a>

我如何改变“标题”属性在浏览器中的表示?默认情况下，它只有黄色背景和小字体。我想把它做大一点，并改变背景颜色。

是否有CSS方法来样式标题属性?

727465 次浏览
小开

CSS不能改变工具提示的外观。它依赖于浏览器/操作系统。如果你想要一些不同的东西，你必须使用Javascript来生成标记，当你把鼠标悬停在元素上，而不是默认的工具提示。

小开

下面是一个如何做到这一点的例子:

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>

小开

本机工具提示不能设置样式。

也就是说，你可以使用一些库，在元素悬停时显示样式浮动层(而不是本地工具提示，并抑制它们)，只需要很少或根本不需要修改代码……

小开

无法设置默认浏览器工具提示的样式。但是您可以使用javascript创建自己的自定义HTML工具提示。

小开 
a[title="My site"] {
color: red;
}

这也适用于你想添加的任何属性，例如:

超文本标记语言

<div class="my_class" anything="whatever">My Stuff</div>

CSS

.my_class[anything="whatever"] {
color: red;
}

看到它工作在:http://jsfiddle.net/vpYWE/1/

小开

我想我应该在这里发布我的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;
}
小开

用于自定义工具提示模式的jsfiddle是在这里

它基于CSS定位和伪类选择器

检查MDN文档是否支持伪类的跨浏览器支持

    <!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a>&nbsp; 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;
}
小开

似乎实际上有一个纯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>

更新 w/ input from @ViROscar:请注意，没有必要使用任何特定的属性，尽管我已经使用了"title"属性中的;实际上，我的建议是使用“替代”;属性，因为有一些机会，内容将被无法从CSS受益的用户访问。

再次更新我没有改变代码，因为"title"属性基本上意味着“工具提示”;属性，并且将重要文本隐藏在仅在悬停时可访问的字段中可能不是一个好主意，但如果您有兴趣使此文本可访问“aria-label"属性似乎是放置它的最佳位置:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

小开

我在这里找到了答案: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(data-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" data-gloss="Text shown on hovering">Exposed text</a>

小开

你不能样式一个实际的title属性

title属性中的文本如何显示是由浏览器定义的，并且因浏览器而异。网页不可能根据title属性对浏览器显示的工具提示应用任何样式。

但是，您可以使用其他属性创建非常相似的内容。

你可以用CSS和自定义属性(例如data-title)创建一个伪工具提示。

为此，我将使用data-title属性。data-*属性是在DOM元素/HTML中存储自定义数据的方法。有访问它们的多种方式。重要的是，CSS可以选择它们。

既然可以使用CSS来选择具有data-title属性的元素，那么可以使用CSS创建:after(或:before) content，其中包含使用attr()的属性值。

样式化工具提示示例

更大，背景颜色不同(根据问题要求):

[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

更精致的样式(改编自这篇博文):

[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

“我可以在输入字段上使用:before或:after伪元素吗?”中有一个很好的解释

实际上，这意味着你不能直接在<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=&quot;text&quot;"><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对那个(现已删除)答案的评论中也建议这样做。


提交答案