I know there are a lot of examples for customizing the tooltip of an html element but I can't make it working.
I have a simple anchor that looks like the following:
<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>
And then I created the following css style (I copied from an example):
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);
}
As you can see in the fiddle I created, the result is not what I expect.
So, what do I have to change?
Just make the positioning of the a tag relative
a[title] {
position: relative;
}
That way your tooltip will now be absolute to the anchor tag, not to the document.
Updated fiddle: https://jsfiddle.net/36kp45e2/2/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.