Pattern pratici: tooltip e monitoraggio dello stato
Usare data-* per tooltip, stati attivi e configurazione dei componenti
Pattern pratici: tooltip e monitoraggio dello stato è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Tooltip con data-tooltip
Memorizzi il testo del tooltip in data-tooltip sull'elemento attivatore. Il CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } lo visualizza senza JavaScript. Per tooltip accessibili, aggiunga role="tooltip" e aria-describedby che punti a un elemento reale.
Posizionamento dei tooltip CSS
L'elemento attivatore deve avere position: relative. Lo pseudo-elemento ::after utilizza position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) per centrare il tooltip sopra l'elemento attivatore. Aggiunga white-space: nowrap per impedire il ritorno a capo.
Monitoraggio dello stato con data-state
Sostituisca più classi booleane (is-open, is-loading, is-error) con un singolo attributo data-state: el.dataset.state = "loading". Il CSS seleziona [data-state="loading"] — un attributo, una regola CSS per ogni stato e nessuna gestione delle classi.
Accordion con data-expanded
Ogni elemento dell'accordion ha data-expanded="false". JavaScript lo alterna: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". Il CSS mostra o nasconde il pannello: [data-expanded="false"] .panel { display: none; }.
Stato attivo della scheda
Un contenitore di schede memorizza la scheda attiva: data-active-tab="0". JavaScript lo aggiorna al clic. Il CSS può selezionare il pannello attivo con [data-active-tab="0"] #panel-0. L'intero stato delle schede risiede in un unico attributo sull'elemento contenitore.
Monitoraggio dei passaggi del modulo
I moduli in più passaggi memorizzano il passaggio corrente in data-step sull'elemento form. Il CSS mostra solo il passaggio corrispondente: form[data-step="2"] .step-2 { display: block; }. Gli altri passaggi rimangono nascosti senza alternare le classi per ogni passaggio.
Pattern dello stato di caricamento
Per i pulsanti durante le operazioni asincrone: btn.dataset.state = "loading" disabilita l'interazione e mostra uno spinner tramite CSS. Al completamento, imposti btn.dataset.state = "idle". Un attributo sostituisce tre modifiche separate delle classi e un controllo dell'attributo disabled.
Pattern della maniglia di trascinamento
Contrassegni gli elementi trascinabili con data-draggable="true" e le aree di rilascio con data-droptarget="true". I listener degli eventi utilizzano i selettori degli attributi per trovare tutti gli elementi trascinabili: document.querySelectorAll("[data-draggable]"). La presenza dell'attributo è più semantica dei nomi delle classi per indicare l'intento comportamentale.
Indicatore di avanzamento
Un componente stepper utilizza data-step-status per ogni passaggio: "completed", "current", "upcoming". Il CSS applica uno stile distinto a ogni stato. JavaScript imposta lo stato di ogni passaggio in base alla posizione corrente — uno stato leggibile senza dover replicare un oggetto di stato JavaScript.
Persistenza del tema
Memorizzi la preferenza del tema dell'utente in localStorage e la applichi al caricamento: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". Il CSS seleziona [data-theme="dark"] per la modalità scura — persistente e senza FOUC quando lo script viene eseguito in <head>.
Metadati dinamici dei contenuti
Gli elenchi renderizzati dal server includono metadati negli attributi data: data-product-id, data-price, data-category. JavaScript li legge senza ulteriori chiamate API per il filtraggio, l'ordinamento o la funzionalità del carrello lato client, utilizzando i dati già renderizzati.
Verifica delle conoscenze
Qual è il vantaggio di usare data-state="loading" invece di aggiungere o rimuovere una classe CSS?
Riepilogo
Gli attributi data-* consentono di realizzare pattern pratici e potenti: tooltip CSS con content:attr(), macchine a stati con data-state al posto di molteplici alternanze di classi, tracciamento di moduli a più passaggi, persistenza del tema tramite documentElement.dataset e metadati renderizzati dal server per funzionalità lato client — tutto senza duplicare lo stato JavaScript.
Domande Frequenti
La lezione «Pattern pratici: tooltip e monitoraggio dello stato» è gratuita?
Sì — il testo completo di «Pattern pratici: tooltip e monitoraggio dello stato» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Pattern pratici: tooltip e monitoraggio dello stato»?
Usare data-* per tooltip, stati attivi e configurazione dei componenti Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Pattern pratici: tooltip e monitoraggio dello stato»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Sintassi di data-* e convenzioni di denominazione
- Accedere a data-* con dataset in JavaScript
- Usare data-* con i selettori di attributo CSS
- Pattern pratici: tooltip e monitoraggio dello stato