Crea tooltips con CSS.
Demo: Ejemplos de tooltip
Un tooltip se suele utilizar para especificar información extra sobre algo cuando el usuario pasa el puntero del ratón por encima de un elemento:
Tooltip básico
Crea un tooltip que aparezca cuando el usuario pase el ratón por encima de un elemento:
Ejemplo explicado
El texto del tooltip se coloca dentro de un elemento inline (como <span>) con class="tooltiptext".
CSS: La clase tooltip utiliza position:relative, que es necesario para posicionar el texto del tooltip (position:absolute).Nota: Vea los ejemplos a continuación sobre cómo posicionar el tooltip.
La clase tooltiptext contiene el texto real del tooltip. Está oculto por defecto, y será visible al pasar por encima (ver más abajo). También le hemos añadido algunos estilos básicos: 120px de ancho, color de fondo negro, color de texto blanco, texto centrado y 5px de relleno superior e inferior.
La propiedad CSS border-radius se utiliza para añadir esquinas redondeadas al texto del tooltip.
El selector :hover se utiliza para mostrar el texto del tooltip cuando el usuario pasa el ratón por encima del <div> con class="tooltip".
Posicionamiento de los tooltips
En este ejemplo, el tooltip se coloca a la derecha (left:105%) del texto «hoverable» (<div>). También hay que tener en cuenta que top:-5px se utiliza para colocarlo en el centro de su elemento contenedor. Usamos el número 5 porque el texto del tooltip tiene un padding superior e inferior de 5px. Si aumentas su padding, aumenta también el valor de la propiedad top para asegurarte de que se mantiene en el centro (si es algo que quieres). Lo mismo se aplica si quieres que el tooltip se coloque a la izquierda.
Herramienta derecha
top: -5px;
left: 105%;
}
Resultado:
Pruébalo tú mismo »
Herramienta izquierda
top: -5px;
right: 105%;
}
Resultado:
Pruébalo tú mismo »
Si quieres que el tooltip aparezca en la parte superior o en la parte inferior, consulta los ejemplos de abajo. Tenga en cuenta que utilizamos la propiedad margin-left con un valor de menos 60 píxeles. Esto es para centrar el tooltip por encima/debajo del texto hoverable. Se ajusta a la mitad del ancho del tooltip (120/2 = 60).
Flechas del Tooltip
Para crear una flecha que debe aparecer desde un lado específico del tooltip, añade contenido «vacío» después del tooltip, con la clase de pseudo-elemento ::after junto con la propiedad content. La flecha en sí se crea usando bordes. Esto hará que el tooltip parezca una burbuja de diálogo.
Este ejemplo demuestra cómo añadir una flecha en la parte inferior del tooltip:
Ejemplo explicado
Posiciona la flecha dentro del tooltip: top: 100% colocará la flecha en la parte inferior del tooltip. left: 50% centrará la flecha.
Nota: La propiedad border-width especifica el tamaño de la flecha. Si cambias esto, cambia también el valor de margin-left al mismo. Esto mantendrá la flecha centrada.
El border-color se utiliza para transformar el contenido en una flecha. Establecemos el borde superior en negro, y el resto en transparente. Si todos los lados fuesen negros, acabarías con una caja cuadrada negra.
Este ejemplo demuestra cómo añadir una flecha a la parte superior de la información sobre herramientas. Fíjese que esta vez hemos establecido el color del borde inferior:
Este ejemplo demuestra cómo añadir una flecha a la izquierda de la información sobre herramientas:
Este ejemplo demuestra cómo añadir una flecha a la derecha de la información sobre herramientas:
Fade In Tooltips (Animación)
Si quieres desvanecer el texto del tooltip cuando está a punto de ser visible, puedes usar la propiedad CSS transition junto con la propiedad opacity, y pasar de ser completamente invisible a 100% visible, en un número de segundos especificado (1 segundo en nuestro ejemplo):