Recently I wanted to add tooltip text for some links in my blog ( as you can see above in my navigation menu ). So I added some additional attributes into my <a> tags so that I can create a styled tooltip.
<a href="#" class="tooltip" title="This is tooltip text">This is a link</a>
And I used following CSS code for styilng.
.tooltip { display: inline; position: relative; } .tooltip:hover:after{ background: #3385FF; background: #3385FF); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; } .tooltip:hover:before{ border: solid; border-color: #3385FF transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }
One thing I noticed is default browser tooltips are also visible. You may try to avoid browser tooltips using many jquery solutions. But there is really really simple solution.
What I did was I renamed title attribute of <a> tag into another name (say tooltiptext). Then I changed the line of css code,
content: attr(title);
into
content: attr(tooltiptext);
That solved my problem. One there's a title attribute in an <a> tag, browser detects it as a default tooltip text and displays it. But when we used our own defined attribute, we can avoid it.