例:
<a href="example.com" title="My site"> Link </a>
如何更改"标题"属性.默认情况下,它只有黄色背景和小字体.我想把它变大,改变背景颜色.
是否有CSS方式来设置title属性的样式？
小智 120
以下是如何执行此操作的示例:
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>Jon*_*n z 110
似乎实际上有一个纯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
Mak*_*yen 47
title属性的样式如何title显示属性中的文本由浏览器定义,并且因浏览器而异.网页无法将任何样式应用于浏览器根据title属性显示的工具提示.
但是,您可以使用其他属性创建非常相似的内容.
data-title)为此,我使用了一个data-title属性.data-*attributes是一种在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属性.在snostorm对该(现已删除)答案的评论中也提到了这样做.
cle*_*tus 25
CSS无法更改工具提示的外观.它取决于浏览器/操作系统.如果你想要不同的东西,当你将鼠标悬停在元素上而不是默认的工具提示时,你将不得不使用Javascript来生成标记.
Chr*_*isF 12
我以为我会在这里发布我的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;
}
自定义工具提示模式的jsfiddle就在这里
它基于CSS Positioning和pseduo类选择器
检查MDN文档以获取伪类的跨浏览器支持
<!-- 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;
}
我在这里找到了答案: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>