Tooltip CSS hover: prompt con código copiable

Este prompt solicita la creación de un tooltip (información emergente) implementado únicamente con CSS, sin necesidad de JavaScript. La técnica utiliza atributos de datos HTML para almacenar el texto del tooltip directamente en el marcado, combinado con pseudoelementos CSS como ::before o ::after y la propiedad content para mostrarlo al pasar el cursor. Es una solución ligera, accesible y fácil de mantener, ideal para proyectos donde se busca minimizar dependencias externas.

Sus casos de uso son muy amplios: formularios con ayuda contextual, iconos de interfaz que necesitan descripción, tablas de datos con aclaraciones, o cualquier elemento interactivo que requiera una explicación breve. Funciona perfectamente con modelos de generación de código como GPT-4 o Claude. Para variaciones, puedes ampliar el prompt indicando estilos específicos como esquinas redondeadas, sombras, animaciones de entrada o posicionamiento dinámico según la ubicación del elemento en pantalla.