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. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Real-world Patterns Tooltips State Tracking” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “Real-world Patterns Tooltips State Tracking”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
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