[英]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.