tooltip

Hover/focus tooltip with 4 positions. Pure CSS via ::after.

status: stable js: none support: baseline

Preview

<button class="btn tooltip" data-tooltip="T">…</button>

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/tooltip.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add tooltip

Hover/focus via CSS — but ::after content is not in the AT tree; add aria-label/aria-describedby

.tooltip

base/tokens