Forum

Posted: **29 Dec 2014, 14:45**

Hello
I'm using this simple html code:

<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..

Posted: **29 Dec 2014, 15:07**

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>

Forum

Tooltip with CSS prevent the original title to be displayed

Tooltip with CSS prevent the original title to be displayed

Tooltip with CSS prevent the original title to be displayed