Hover Target
Generated CSS
Un tooltip CSS muestra información suplementaria al pasar el cursor o hacer foco sobre un elemento — sin necesidad de JavaScript. El enfoque estándar usa position: absolute en un pseudo-elemento ::before, oculto por defecto con opacity: 0; visibility: hidden y revelado en :hover y :focus-visible.
El desafío fundamental con la visibilidad del tooltip es que display: none no puede transicionarse. La solución es usar opacity y visibility juntos. La opacidad transiciona de 0 a 1 suavemente. La visibilidad distingue entre oculto (no interactivo) y visible, y acepta un retraso de transición — permitiéndote hacer el elemento no interactivo solo después de que la desvanecida se complete.
El elemento disparador necesita position: relative para que el tooltip posicionado absolutamente esté contenido en su sistema de coordenadas. Para un tooltip encima del disparador, bottom: calc(100% + 10px) lo coloca 10px encima del borde superior del disparador. Para abajo, top: calc(100% + 10px). El centrado se maneja con left: 50%; transform: translateX(-50%).
Añadir un pequeño deslizamiento direccional a la aparición del tooltip lo hace sentir más responsivo y pulido. La técnica es dar al tooltip un pequeño desplazamiento en el estado oculto — por ejemplo, transform: translateX(-50%) translateY(4px) — y transicionarlo a translateY(0) en el estado visible.
La implementación más mantenible usa CSS para leer el contenido del tooltip directamente desde un atributo HTML mediante la declaración content: attr(data-tooltip) en el pseudo-elemento. Esto significa que estableces data-tooltip="Tu texto de sugerencia" en el elemento disparador en HTML.
Los tooltips que aparecen instantáneamente al pasar el cursor pueden ser molestos — cualquier vez que el usuario mueva el ratón por la interfaz, los tooltips parpadean en cada elemento que pasan. Añadir un retraso de 300-500ms antes de mostrar lo previene.
Un tooltip solo de cursor es inaccesible para usuarios de teclado. La corrección es incluir :focus-visible junto con :hover en cada selector que muestre el tooltip. :focus-visible es preferido porque solo muestra el tooltip cuando el elemento recibe foco de teclado. Los lectores de pantalla se benefician de que el texto del tooltip esté disponible como descripción accesible mediante aria-describedby.
El bug de tooltip más común es que sea recortado por un elemento padre con overflow: hidden. Las soluciones son: eliminar el overflow:hidden del ancestro si no es necesario, o mover el tooltip fuera del ancestro problemático usando posicionamiento JavaScript.
Los tooltips son la elección correcta para texto corto suplementario que restatea o clarifica lo que hace un elemento de interfaz. No son la elección correcta para información esencial, contenido interactivo o explicaciones largas. Cuando el contenido es más rico que una sola frase corta, o cuando necesita permanecer visible después de que el usuario mueva el ratón, un popover es el patrón apropiado.
display: none elimina el elemento del árbol de renderizado instantáneamente y no puede transicionarse. opacity: 0 hace el elemento invisible pero lo mantiene en el layout, y transiciona suavemente. visibility: hidden hace el elemento no interactivo mientras lo mantiene en el layout.
Usa content: attr(data-tooltip) en tu CSS de pseudo-elemento y añade data-tooltip="Tu texto aquí" a cada elemento disparador en HTML. Puedes cambiar el texto del tooltip cambiando el valor del atributo data mediante JavaScript sin tocar tu CSS.
No de forma fiable. Los dispositivos táctiles no tienen estado de hover. Para tooltips amigables con el táctil, usa un enfoque de alternancia al tocar con JavaScript, o usa el atributo nativo popover que está diseñado para funcionar tanto con ratón como con interacciones táctiles.
La corrección más limpia solo con CSS es eliminar overflow: hidden del ancestro si no es necesario. Si el overflow es necesario para el layout, necesitas mover el tooltip fuera del límite de overflow, lo que típicamente requiere JavaScript para posicionarlo añadiéndolo al cuerpo del documento.
El elemento tooltip debe tener role="tooltip" y un id. El elemento disparador debe tener aria-describedby apuntando al id del tooltip. Esto permite que los lectores de pantalla anuncien el texto del tooltip como descripción adicional cuando el disparador recibe el foco.
Añade un valor de transition-delay coincidente a las transiciones de opacidad y visibilidad solo en la dirección de oculto a visible. Usa 300-500ms para la dirección de mostrar, y sin retraso para la dirección de ocultar.