CSS Tooltip Generator

A pure CSS tooltip is a hover popup built with zero JavaScript. The generator above creates two pseudo-elements on your trigger: ::before renders the bubble by reading your text from the data-tooltip attribute (content: attr(data-tooltip)), and ::after draws the arrow with the classic transparent-border triangle technique. A :hover rule flips opacity and visibility from 0 to 1, with an optional transition for the animation. Because there is no script involved, the tooltip works even when JavaScript is disabled or blocked.

Three steps: (1) paste the generated CSS into your stylesheet (or a <style> block in your page head); (2) add class="ntt ntt--top" to any element you want to trigger the tooltip — swap ntt--top for ntt--bottom, ntt--left, or ntt--right to change the position; (3) add the data-tooltip="Your text here" attribute with the tooltip content. That is the entire integration — the ::before pseudo-element pulls the text from the attribute automatically, so you never duplicate content.

Yes. The generated CSS always emits all four position modifiers — .ntt--top, .ntt--bottom, .ntt--left, and .ntt--right — from a single build, so you can mix positions freely: <button class="ntt ntt--left" data-tooltip="Left one"> and <span class="ntt ntt--bottom" data-tooltip="Bottom one"> on the same page work with one stylesheet. Each modifier positions both the bubble (::before) and the arrow (::after) so they stay aligned on the correct side of the trigger.

With the default settings the bubble sits 14px from the trigger: the 8px gap you set plus the 6px arrow size (the arrow bridges the gap, sitting 8px out). Change the "Gap" slider or the "Arrow size" control and the generator recomputes the calc(100% + Npx) offsets for both ::before and ::after, so bubble and arrow always stay flush no matter what values you pick.

The most common cause is an ancestor element with overflow: hidden (or overflow: auto/scroll) — absolutely positioned pseudo-elements are clipped by any ancestor that creates a clipping context, no matter how high your z-index is. Fixes: allow the ancestor to use overflow: visible, move the trigger outside the clipping container, or pick a position (top vs bottom) that points into open space. A second cause is the tooltip hitting the viewport edge; keep max-width reasonable (the default 250px) and prefer left/right positions for triggers near the top or bottom of the screen.

Yes — there is no JavaScript to fail in the first place, so ad blockers and disabled scripting change nothing. On touch devices the first tap acts as :hover, revealing the tooltip. This generator also emits :focus and :focus-visible show rules (toggleable), so keyboard users get the tooltip too, and it wraps the animation in a prefers-reduced-motion media query (also toggleable) that disables motion for users who request it.

The default dark theme uses background #111827 with #ffffff text, which computes to a 17.74:1 contrast ratio — far above the WCAG AA requirement of 4.5:1 for normal text. The live contrast badge under the theme picker recomputes the WCAG ratio for any custom colors you choose and warns you if it drops below 4.5:1, so your tooltips stay readable by design.