demo · v131
CSS Tooltip via @property
Registering a custom property with syntax: "<string>" gives it typed validation,
a real initial value, and correct inheritance — so ::after { content: var(--tooltip-text); }
picks up the right label on every button without a line of JS in the hot path.
Toolbar — hover any button to see its tooltip
↳
The ❓ button has no --tooltip-text set.
Hover it to see the initial-value fallback: "No description available".
Inheritance test
When inherits: true, setting --tooltip-text on a parent lets
unscoped children inherit the value. Children with their own value keep it.
Group wrapper: no --tooltip-text set (children use their own values)
Hover the buttons above. The 📌 button always shows "Always mine". The others show their own fallback (initial-value) until you toggle inheritance.
Live tooltip editor
Click any button in the main toolbar to select it, then type a new tooltip label.
The demo calls button.style.setProperty('--tooltip-text', JSON.stringify(value))
— no DOM mutation to the text nodes, just a typed CSS property update.
← Click a toolbar button above to select it
the code
/* Register the typed string property */
@property --tooltip-text {
syntax: "<string>";
inherits: true;
initial-value: "No description available";
}
/* Each button declares its own tooltip text */
.tool-btn {
position: relative;
--tooltip-text: "Button";
}
/* Tooltip rendered purely from the CSS property */
.tool-btn::after {
content: var(--tooltip-text);
position: absolute;
bottom: calc(100% + 0.4rem);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.tool-btn:hover::after {
opacity: 1;
}
/* HTML — each button sets its own string */
<button class="tool-btn"
style="--tooltip-text: 'Save'">💾</button>
/* Inheritance: set on parent, children inherit */
<div style="--tooltip-text: 'Group action'">
<button class="tool-btn">🗂️</button> /* inherits */
<button class="tool-btn"
style="--tooltip-text: 'Always mine'">📌</button>
</div>
/* JS live update */
btn.style.setProperty('--tooltip-text', JSON.stringify(newLabel));