When mouse goes on tooltip hide tooltip

HTML & CSS
1

hi all

this is html5 tooltip

Is it possible to hide tooltip when mouse goes over it

i want to show tooltip only when mouse goes over < a link >

but when mouse goes over tooltip it should get hide.

The position of tooltip should remain there only.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:100px;}
.tooltip{
    display: inline;
    position: relative;
}
.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 18px;
    color: #fff;
    content: attr(title);
    left: 0%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}
</style>
</head>
<body>
<a href="#" title="This is some our tooltip" class="tooltip">my Tooltip</a>
</body>
</html>

vineet

2

Hi there vinpkl,

do not use a transitional “DOCTYPE”,
we are now in the twenty first century. :mask:

You will also need to use a slightly
different approach for your problem…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
    margin:6.25em;
 }
.tooltip {
    display: inline;
    position: relative;
 }
.tooltip:hover span::after {
    position: absolute;
    z-index: 98;
    width: 14em;
    padding: 0.4em 1em;
    bottom: 1.2em;
    left: 0;
    border-radius: 0.4em;
    background: #333;
    background: rgba(0,0,0,.8);
    color: #fff;
    text-align: center;
    content: attr(data-title);
 }
.tooltip span:hover {
    display: none;
 }
</style>
</head>
<body>
 <a href="#" class="tooltip">
   my Tooltip
   <span data-title="This is one of our tooltips"></span>
 </a>
</body>
</html>

coothead

1 Like
3

thanks coothead

it works perfect

vineet

4

 
 
      No problem, you’re very welcome. :sunglasses:
 
 
 coothead

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.