Patrones reales: tooltips y seguimiento de estados
Use data-* para tooltips, estados activos y configuración de componentes
Patrones reales: tooltips y seguimiento de estados es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Tooltip con data-tooltip
Almacene el texto del tooltip en data-tooltip del elemento que lo activa. CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } lo muestra sin JavaScript. Para crear tooltips accesibles, añada role="tooltip" y aria-describedby apuntando a un elemento real.
Posicionamiento de tooltips con CSS
El elemento activador necesita position: relative. El pseudoelemento ::after usa position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) para centrar el tooltip sobre el elemento activador. Añada white-space: nowrap para evitar que el texto se ajuste.
Seguimiento del estado con data-state
Sustituya varias clases booleanas (is-open, is-loading, is-error) por un único atributo data-state: el.dataset.state = "loading". CSS selecciona [data-state="loading"]: un atributo, una regla CSS por estado y ninguna gestión de clases.
Acordeón con data-expanded
Cada elemento del acordeón tiene data-expanded="false". JavaScript alterna su valor: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". CSS muestra u oculta el panel: [data-expanded="false"] .panel { display: none; }.
Estado activo de una pestaña
Un contenedor de pestañas almacena la pestaña activa: data-active-tab="0". JavaScript actualiza este valor al hacer clic. CSS puede seleccionar el panel activo mediante [data-active-tab="0"] #panel-0. Todo el estado de las pestañas reside en un único atributo del elemento contenedor.
Seguimiento de los pasos de un formulario
Los formularios de varios pasos almacenan el paso actual en data-step del elemento del formulario. CSS muestra únicamente el paso correspondiente: form[data-step="2"] .step-2 { display: block; }. Los demás pasos permanecen ocultos sin alternar clases individualmente.
Patrón de estado de carga
Botones durante acciones asíncronas: btn.dataset.state = "loading" desactiva la interacción y muestra un indicador de carga mediante CSS. Al finalizar, establezca btn.dataset.state = "idle". Un atributo sustituye a tres alternancias de clases independientes y a una comprobación del atributo disabled.
Patrón de controlador de arrastre
Marque los elementos arrastrables con data-draggable="true" y los destinos de soltado con data-droptarget="true". Los listeners de eventos usan selectores de atributos para encontrar todos los elementos arrastrables: document.querySelectorAll("[data-draggable]"). La presencia de un atributo es más semántica que los nombres de clase para expresar la intención de comportamiento.
Indicador de progreso
Un componente stepper usa data-step-status en cada paso: "completed", "current", "upcoming". CSS aplica un estilo distinto a cada estado. JavaScript establece el estado de cada paso según la posición actual, lo que permite leer el estado sin duplicarlo en un objeto de estado de JavaScript.
Persistencia del tema
Almacene la preferencia de tema del usuario en localStorage y aplíquela al cargar la página: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". CSS selecciona [data-theme="dark"] para el modo oscuro; la página no muestra un destello de estilo sin aplicar cuando el script se ejecuta en <head>.
Metadatos del contenido dinámico
Las listas renderizadas por el servidor incluyen metadatos en atributos de datos: data-product-id, data-price, data-category. JavaScript los lee sin llamadas adicionales a la API para filtrar, ordenar o gestionar el carrito en el cliente usando los datos ya renderizados.
Comprobación de conocimientos
¿Cuál es la ventaja de usar data-state="loading" en lugar de añadir o eliminar una clase CSS?
Resumen
Los atributos data-* permiten implementar patrones muy útiles en aplicaciones reales: tooltips CSS con content:attr(), máquinas de estados con data-state en lugar de alternar varias clases, seguimiento de formularios de varios pasos, persistencia del tema mediante documentElement.dataset y metadatos renderizados por el servidor para funcionalidades del lado del cliente, todo ello sin duplicar el estado en JavaScript.
Preguntas frecuentes
¿La lección «Patrones reales: tooltips y seguimiento de estados» es gratis?
Sí — el texto completo de «Patrones reales: tooltips y seguimiento de estados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Patrones reales: tooltips y seguimiento de estados»?
Use data-* para tooltips, estados activos y configuración de componentes Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Patrones reales: tooltips y seguimiento de estados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Sintaxis data-* y convenciones de nomenclatura
- Acceder a data-* con dataset en JavaScript
- Usar data-* con selectores de atributos CSS
- Patrones reales: tooltips y seguimiento de estados