Descargar ejemplo de ToolTip con CSS en español

para poder crear un ToolTip necesitamos dos apartados: El CSS y el HTML

si quieres puedes descargar el ejemplo completo de este tooltip para poder utilizarlo en tu web haciendo clic aquí

Descargar ToolTip con CSS

el apartado HTML es muy simple tenemos definido un div con una clase asignada tooltip y dentro de este div tenemos una etiqueta span que es la que aparecerá  y tiene asignada una clase que se llama tooltiptexto

<body>
<h1>Ejemplo de ToolTip</h1>
<div class="tooltip">Situate encima de mi
<span class="tooltiptexto">Hola cybernauta</span>
</div>

</body>

y en el apartado CSS tenemos definidas unas clases para el tooltip y para el tooltiptexto los cuales en principio están ocultos y tienen definido un color de texto, color de fondo, márgenes, etcétera

y al final del todo tenemos una clase para que cuando pase el cursor por encima del texto , pone visible el tooltip junto con el texto que hay dentro de la etiqueta span con la opacidad igual a 1

<!DOCTYPE html>
<html>
<style>
.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black;
}
.tooltip .tooltiptexto {
 visibility: hidden;
 width: 120px;
 background-color: #555;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -60px;
 opacity: 0;
 transition: opacity 1s;
}
.tooltip .tooltiptexto::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptexto {
 visibility: visible;
 opacity: 1;
}
</style>

con esto has visto lo simple que es poner un tooltip en tu página web y solo utilizando estilos CSS recuerda que puedes descargar el código completo en el enlace que hay en la parte de arriba de esta entrada