[英]Customizing default tooltip using css
我知道有很多示例可以自定义html元素的工具提示,但我无法使其正常工作。
我有一个简单的锚,如下所示:
<a href="javascript:void(0)" class="tooltipItem" title="Email address that can be used to contact you." tabindex="-1" data-toggle="tooltip" data-placement="right">?</a>
然后创建以下css样式(从示例中复制):
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-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, #1111ee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #11eeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
正如您在我创建的小提琴中看到的那样,结果不是我所期望的。
那么,我必须改变什么?
只是使标签的位置相对
a[title] {
position: relative;
}
这样,您的工具提示现在对锚标记(而不是文档)是绝对的。
更新小提琴: https : //jsfiddle.net/36kp45e2/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.