[英]How to change the tooltip (title of the div) background color in html
我有下面的html,如何使用span作为div的title属性应用样式。 我为id'tooltip-value'应用了背景色,但在这种情况下未应用背景色,如何使其起作用?
这是jsfiddle链接, http://jsfiddle.net/KendoDev/qtyL1rdm/
<div class="tooltip">
<div id='column1' title='<span id="tooltip-value">1</span>' style="width: 40px;">1</div>
<div id='column2' title="2" style="width: 20px;">2 </div>
</div>
您不能设置默认工具提示的样式,但是可以使用content:attr(data-attribute);
来使用data-attributes
来设置此消息的样式content:attr(data-attribute);
.tooltip{padding:20px 0;}
.tooltip div {
font: 10px sans-serif;
background-color: blue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
#column1 {
font: 10px sans-serif;
background-color: blue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
display: inline-block;
position:relative;
}
#column1:after{
content:attr(data-title);
position:absolute;
bottom:100%;
left:100%;
color:#fff;
background:#000;
padding:5px;
display:none;
}
#column1:hover:after{display:block;}
#column2 {
font: 10px sans-serif;
background-color: Red;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
display: inline-block;
position:relative;
}
#column2:after{
content:attr(data-title);
position:absolute;
bottom:100%;
left:100%;
color:#000;
background:#eee;
padding:5px;
display:none;
}
#column2:hover:after{display:block;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.