Avoid displaying browser default tooltips with CSS - styled tooltips

 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.