Tooltip with CSS prevent the original title to be displayed

Place to talk about website HTM elements, CSS style and design, and get help with HTML, CSS codes.
Marius
Posts:107

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 Posts:805
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>