Real-world Patterns Tooltips State Tracking
Apply data-* for tooltips, active states, and component configuration.
Real-world Patterns Tooltips State Tracking is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Tooltip with data-tooltip
Store tooltip text in data-tooltip on the trigger element. CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } displays it without JavaScript. For accessible tooltips, add role="tooltip" and aria-describedby pointing to a real element.
Positioning CSS Tooltips
The trigger needs position: relative. The ::after pseudo-element uses position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) to center the tooltip above the trigger. Add white-space: nowrap to prevent wrapping.
State Tracking with data-state
Replace multiple boolean classes (is-open, is-loading, is-error) with a single data-state attribute: el.dataset.state = "loading". CSS selects [data-state="loading"] — one attribute, one CSS rule per state, zero class management.
Accordion with data-expanded
Each accordion item has data-expanded="false". JavaScript toggles it: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". CSS shows/hides the panel: [data-expanded="false"] .panel { display: none; }.
Tab Active State
A tab container stores the active tab: data-active-tab="0". JavaScript updates this on click. CSS can select the active panel using [data-active-tab="0"] #panel-0. The entire tab state lives in one attribute on the container element.
Form Step Tracking
Multi-step forms store the current step in data-step on the form element. CSS shows only the matching step: form[data-step="2"] .step-2 { display: block; }. Other steps remain hidden without per-step class toggling.
Loading State Pattern
Buttons during async actions: btn.dataset.state = "loading" disables interaction and shows a spinner via CSS. On completion, set btn.dataset.state = "idle". One attribute replaces three separate class toggles and a disabled attribute check.
Drag Handle Pattern
Mark draggable items with data-draggable="true" and drop targets with data-droptarget="true". Event listeners use attribute selectors to find all draggable items: document.querySelectorAll("[data-draggable]"). Attribute presence is more semantic than class names for behavior intent.
Progress Indicator
A stepper component uses data-step-status on each step: "completed", "current", "upcoming". CSS styles each status distinctly. The JavaScript sets each step's status based on the current position — readable state without a JavaScript state object to mirror.
Theme Persistence
Store the user's theme preference in localStorage, apply it on load: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". CSS selects [data-theme="dark"] for dark mode — persistent, FOUC-free when the script runs in <head>.
Dynamic Content Metadata
Server-rendered lists include metadata in data attributes: data-product-id, data-price, data-category. JavaScript reads these without additional API calls for client-side filtering, sorting, or cart functionality using already-rendered data.
Knowledge Check
What is the advantage of using data-state="loading" over adding/removing a CSS class?
Summary
data-* attributes enable powerful real-world patterns: CSS tooltips with content:attr(), state machines with data-state replacing multiple class toggles, multi-step form tracking, theme persistence via documentElement.dataset, and server-rendered metadata for client-side functionality — all without JavaScript state mirroring.
Frequently asked questions
Is the “Real-world Patterns Tooltips State Tracking” lesson free?
Yes — the full text of “Real-world Patterns Tooltips State Tracking” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Real-world Patterns Tooltips State Tracking”?
Apply data-* for tooltips, active states, and component configuration. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Real-world Patterns Tooltips State Tracking” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- data-* Syntax and Naming Conventions
- Accessing data-* with dataset in JavaScript
- Using data-* with CSS attribute selectors
- Real-world Patterns Tooltips State Tracking