Simple CSS Tooltip — No JavaScript, No Attributes, No Script Loop

This library's other tooltip snippet uses a small JS loop to copy each trigger's data-tip attribute into a child .tip span's textContent, purely so a single reusable CSS ruleset can serve any number of tooltips without repeating markup. That's a reasonable convenience in a normal web app — but it is still JavaScript, and there are real environments where even that one small loop cannot run at all. This snippet is the version for exactly those environments: the tooltip text is authored directly as static HTML, and the CSS does nothing but reveal and position it.

Static content instead of a data attribute

Rather than data-tip="..." plus a script that reads it, each trigger simply contains a child <span class="tooltip-text"> with the real message typed directly into the markup: <span class="tooltip-text">Saves the current draft...</span>. There is no attribute to read, no textContent assignment, no loop over querySelectorAll — the browser parses the tooltip text as ordinary HTML content the same way it parses the button's own label, and CSS positions and hides/reveals that already-present element.

Why not attr() and content instead?

CSS does have a way to pull an HTML attribute's value into rendered content — content: attr(data-tip) on a ::before/::after pseudo-element. It was deliberately not used here, for two practical reasons: pseudo-element generated content is not selectable text and is invisible to some assistive technology and to a browser's "find in page," making it a poor choice for genuinely informative tooltip text; and it still requires memorizing and correctly quoting attribute-escaped text in an HTML attribute, which is markedly more error-prone for longer messages than just writing a normal child element. A plain <span> with real text content is simpler, more accessible, and requires zero special escaping — which is why it's the more broadly-recommended approach for exactly this "truly no JS, no tricks" use case.

visibility + opacity, not display

The tooltip toggles visibility and opacity together, not display. display can't be transitioned by CSS at all, so a fade would be impossible with it; visibility can be included in a transition list (letting the browser defer hiding until the fade-out finishes) while also removing the element from the accessibility tree and click hit-testing once fully hidden — opacity: 0 alone would leave an invisible-but-interactive tooltip floating over the page.

The arrow, identical technique to the JS-assisted version

The small triangle is one 8×8px ::after box rotated 45 degrees positioned so half of it sits behind the tooltip's bottom edge — the same simple, broadly-compatible technique as the reference tooltip.js snippet, since the arrow itself was never dependent on JavaScript in either version; only the *text-filling* mechanism differs between the two snippets.

:hover and :focus-visible together, same as always

:hover alone would leave keyboard users with no way to see the tooltip at all, since tabbing to an element never triggers :hover. :focus-visible covers exactly that gap, and because both selectors point at the identical .tooltip-text rule, mouse and keyboard users get the same visual reveal through two different interaction paths.

Where this version — not the JS-assisted one — is required

Sanitized user-generated content (forum posts, comments, wiki pages) frequently strips <script> tags but allows a constrained set of safe HTML elements including plain <span>s; many CMS "raw HTML" content areas do the same; HTML email clients strip all scripts universally, with no exceptions; AMP pages forbid custom JavaScript outright; and iframe embeds sandboxed without allow-scripts simply will not execute any script, however small. In every one of these, the JS-assisted tooltip.js snippet's fill-in loop never runs, so its .tip spans stay empty and no tooltip text ever appears — while this snippet's statically-authored text is present in the HTML from the very first paint, unaffected by whether scripting is available at all.