Para hacer un tooltip deberemos crear dos clases, una para el contenedor (el texto que al pasar el ratón mostrara el globito) y otra para el texto (para el globito).
.tooltip_contenedor {
position: relative;
display: inline-block;
}
un espacio entre ambas clases
si lo hay significa todos los elementos que tengan la clase tooltitext que tengan como padre a tooltip_contenedor
si no tiene el espacio significa todos los elementos que tengan ambas clases
.tooltip_contenedor .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;Vtext-align: center;
padding: 5px 0;
border-radius: 6px;
/* Posicion de el globito */
position: absolute;
z-index: 1;
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;Vtext-align: center;
padding: 5px 0;
border-radius: 6px;
/* Posicion de el globito */
position: absolute;
z-index: 1;
}
el comportamiento de todos los elementos con clase tooltiptext cuando pasa el raton sobre los elementos con clase tooltip_contenedor
.tooltip_contenedor:hover .tooltiptext {
visibility: visible;
}
si queremos cambiar la posicion del globito
/* Posicion de el globito */
position: absolute;
z-index: 1;
la propiedad bottom ubica al globito abajo o arriba dependiendo de su valor, si es 0 esta abajo, si esta en 100% empezara a estar arriba.
la propiedad left ubica al globito antes de empezar o después de terminar el elemento
Ver Ejemplo 2
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;}
left: 50%;}
la propiedad bottom ubica al globito abajo o arriba dependiendo de su valor, si es 0 esta abajo, si esta en 100% empezara a estar arriba.
