Praxisnahe Muster: Tooltips und Zustandsverwaltung
Verwenden Sie data-* für Tooltips, aktive Zustände und die Konfiguration von Komponenten
Praxisnahe Muster: Tooltips und Zustandsverwaltung ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Tooltip mit data-tooltip
Speichern Sie den Tooltip-Text im auslösenden Element in data-tooltip. CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } zeigt ihn ohne JavaScript an. Für barrierefreie Tooltips fügen Sie role="tooltip" und aria-describedby hinzu, das auf ein echtes Element verweist.
CSS-Tooltips positionieren
Das auslösende Element benötigt position: relative. Das Pseudoelement ::after verwendet position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%), um den Tooltip über dem auslösenden Element zu zentrieren. Fügen Sie white-space: nowrap hinzu, um Zeilenumbrüche zu verhindern.
Statusverfolgung mit data-state
Ersetzen Sie mehrere boolesche Klassen (is-open, is-loading, is-error) durch ein einzelnes data-state-Attribut: el.dataset.state = "loading". CSS selektiert [data-state="loading"] – ein Attribut, eine CSS-Regel pro Status und keine Klassenverwaltung.
Akkordeon mit data-expanded
Jedes Akkordeon-Element hat data-expanded="false". JavaScript schaltet den Wert um: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". CSS blendet das Panel ein oder aus: [data-expanded="false"] .panel { display: none; }.
Aktiver Tab-Status
Ein Tab-Container speichert den aktiven Tab: data-active-tab="0". JavaScript aktualisiert diesen Wert beim Klicken. CSS kann das aktive Panel mit [data-active-tab="0"] #panel-0 selektieren. Der gesamte Tab-Status befindet sich in einem einzigen Attribut am Container-Element.
Verfolgung des Formularschritts
Mehrstufige Formulare speichern den aktuellen Schritt im Attribut data-step des Formularelements. CSS zeigt nur den passenden Schritt an: form[data-step="2"] .step-2 { display: block; }. Die anderen Schritte bleiben ausgeblendet, ohne dass für jeden Schritt Klassen umgeschaltet werden müssen.
Muster für den Ladezustand
Schaltflächen während asynchroner Aktionen: btn.dataset.state = "loading" deaktiviert die Interaktion und zeigt über CSS einen Spinner an. Setzen Sie nach Abschluss btn.dataset.state = "idle". Ein Attribut ersetzt drei separate Klassenumschaltungen und eine Prüfung des disabled-Attributs.
Muster für Ziehgriffe
Kennzeichnen Sie ziehbare Elemente mit data-draggable="true" und Ablageziele mit data-droptarget="true". Ereignis-Listener verwenden Attributselektoren, um alle ziehbaren Elemente zu finden: document.querySelectorAll("[data-draggable]"). Das Vorhandensein eines Attributs beschreibt die Verhaltensabsicht semantischer als ein Klassenname.
Fortschrittsanzeige
Eine Schrittkomponente verwendet für jeden Schritt data-step-status: „completed“, „current“, „upcoming“. CSS gestaltet jeden Status unterschiedlich. JavaScript setzt den Status jedes Schritts anhand der aktuellen Position – der Status ist lesbar, ohne dass ein JavaScript-Statusobjekt gespiegelt werden muss.
Persistenz des Themes
Speichern Sie die Theme-Einstellung des Benutzers in localStorage und wenden Sie sie beim Laden an: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". CSS selektiert [data-theme="dark"] für den dunklen Modus – dauerhaft und ohne FOUC, wenn das Skript in <head> ausgeführt wird.
Metadaten dynamischer Inhalte
Serverseitig gerenderte Listen enthalten Metadaten in Datenattributen: data-product-id, data-price, data-category. JavaScript liest diese ohne zusätzliche API-Aufrufe aus, um bereits gerenderte Daten clientseitig zu filtern, zu sortieren oder für die Warenkorbfunktion zu verwenden.
Wissensüberprüfung
Welchen Vorteil bietet die Verwendung von data-state="loading" gegenüber dem Hinzufügen und Entfernen einer CSS-Klasse?
Zusammenfassung
data-*-Attribute ermöglichen leistungsfähige Muster aus der Praxis: CSS-Tooltips mit content:attr(), Zustandsautomaten mit data-state anstelle mehrerer Klassenumschaltungen, die Nachverfolgung mehrstufiger Formulare, die Speicherung des Themes über documentElement.dataset sowie vom Server gerenderte Metadaten für clientseitige Funktionen – und das alles ohne eine Spiegelung des Zustands in JavaScript.
Häufig gestellte Fragen
Ist die Lektion „Praxisnahe Muster: Tooltips und Zustandsverwaltung“ kostenlos?
Ja — der vollständige Text von „Praxisnahe Muster: Tooltips und Zustandsverwaltung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Praxisnahe Muster: Tooltips und Zustandsverwaltung“?
Verwenden Sie data-* für Tooltips, aktive Zustände und die Konfiguration von Komponenten Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Praxisnahe Muster: Tooltips und Zustandsverwaltung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- data-*-Syntax und Benennungskonventionen
- data-* mit dataset in JavaScript auslesen
- data-* mit CSS-Attributselektoren verwenden
- Praxisnahe Muster: Tooltips und Zustandsverwaltung