Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn abbreviation as a semantic abbr element with its meaning in the title, the accessible description and a focus-reachable tooltip, for the first use of a term.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this in documentation, marketing and settings text for the first mention of an acronym that readers may not know.
Do not use it for every occurrence or for long definitions; link to a glossary page for those.
It builds on tooltip, which the CLI installs for you.
import { TooltipAbbrGlossary } from "@/components/tooltip-abbr-glossary"<TooltipAbbrGlossary
term="WCAG"
definition="Web Content Accessibility Guidelines."
/>| Prop | Type | Default | Description |
|---|---|---|---|
term | string | - | The abbreviation as written. |
definition | string | - | What it stands for or means. |
<abbr title>, so the meaning exists without scripts and in print.| Key | Action |
|---|---|
| Tab | focuses the term and shows its definition |
| Escape | closes the tooltip |
The pattern ships a Testing Library test (tooltip-abbr-glossary.test.tsx) that covers the abbr semantics, focus and tooltip, tab order between terms and Escape.