Tooltip CSS con hover: prompt y código generado con IA

Este prompt solicita la creación de un tooltip en CSS puro que aparece al pasar el cursor sobre un elemento, sin necesidad de JavaScript. La clave está en el uso de atributos de datos (data-tooltip) para almacenar el texto del mensaje, combinado con pseudoelementos como ::before o ::after y transiciones CSS para lograr una animación fluida de entrada y salida.

Es ideal para desarrolladores front-end que quieren añadir información contextual a botones, iconos o enlaces sin depender de librerías externas. Funciona muy bien con modelos de generación de código como GPT-4o o Claude, y se puede reproducir fácilmente ajustando el posicionamiento del tooltip (arriba, abajo, lateral), los colores, la tipografía o el tipo de animación. Una variación útil sería pedir que el tooltip sea accesible con soporte para atributos ARIA, o que se adapte a modo oscuro automáticamente.