-1
<html>
<head>
<style>
a.tooltip-black, a.tooltip-white {
position: relative;
color: red;
text-decoration: none;
cursor: help;
}
a.tooltip-black:hover, a.tooltip-white:hover {
background: transparent;
color: #f00;
z-index: 25;
}
a.tooltip-black span, a.tooltip-white span {
display: none
}
a.tooltip-black:hover span, a.tooltip-white:hover span {
display: block;
position: absolute;
width: 210px;
/*top: 25px;*/
left: 0;
font-size: 14px;
padding: 5px;
border-radius: 3px;
}
a.tooltip-black:hover span:after, a.tooltip-white:hover span:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: -18px;
left: 10px;
}
a.tooltip-black:hover span:before, a.tooltip-white:hover span:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -20px;
left: 10px;
}
/* ----- Definindo as cores ----- */
a.tooltip-black:hover span {
background: rgba(0,0,0,0.7);
border: 1px solid #999;
color: white;
}
a.tooltip-white:hover span {
background: white;
border: 1px solid #999;
color: black;
}
a.tooltip-black:hover span:after {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #4c4c4c transparent;
}
a.tooltip-white:hover span:after {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent white transparent;
}
a.tooltip-black:hover span:before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #999 transparent;
}
a.tooltip-white:hover span:before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #999 transparent;
}
</style>
</head>
<body>
<!-- Tooltip em Textos -->
<p>Teste Tooltip basico
<a href="#" class="tooltip-black"><strong>"Abrir Tooltips"</strong>
<span>Exemplo de utilização de tooltips com Texto sem JavaScript</span></a></p>
</body>
</html>
look at this link https://answall.com/questions/127898/tooltip-css-transition
– Renan
Possible duplicate of Tooltip CSS Transition
– Renan