Tooltip with CSS prevent the original title to be displayed

Marius
Posts: 58

Tooltip with CSS prevent the original title to be displayed

Hello
I'm using this simple html code:

Code: Select all

<html lang="en"> <head></head> <body> <a href="#" title="This is some info for tooltip" class="tooltip"> <span>CSS3 Tooltip</span> </a> </body> </html>
And I've added some css rules to make a nice tooltip when the mouse is hovering over the link.

Code: Select all

.tooltip { display: inline; position: relative; } .tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); 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: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }
I get the tooltip made with CSS, but also the original pop up of the title.
Is there a way to make the browser's default tooltip gone? And only by using a css rule?
Thanks for any kind of help..

Admin
You cannot hide /prevent the original title behavior with CSS only.
But you can change the title attribute to e.g. "data-title" in your HTML, then refer to it in your CSS with content: attr(data-title);.
Here's a complete example:

Code: Select all

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example Tooltip with CSS</title> <style type="text/css"> .tooltip { display: inline; position: relative; } .tooltip:hover:after{ background: #0001cb; background: rgba(0,0,189,.8); border-radius: 5px; bottom: 20px; color: #fff; content: attr(data-title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; } .tooltip:hover:before { border: solid; border-color: #0001cb transparent; border-width: 6px 6px 0 6px; bottom: 16px; content: ""; left: 50%; position: absolute; z-index: 99; } </style> </head> <body> <h1>Example CSS Tooltip</h1> <ul> <li> <a href="#" data-title="Info for tooltip link 1" class="tooltip"><span>CSS3 Tooltip</span></a> </li> <li> <a href="#" data-title="Tooltip Title 2" class="tooltip"><span>Link 2</span></a> </li> </ul> </body> </html>

Similar Topics