Terminology
Inline glossary component that expands abbreviations on hover. Wrap any text to add a tooltip with the expanded form. Optionally links to a glossary page and supports a color accent.
Summary
The Terminology component renders an <abbr> (or <Link> when to is provided) with aria-label and title attributes set to the expanded abbreviation. On hover, browsers display the tooltip natively.
The optional color prop adds a visual accent to distinguish glossary terms from regular text.
Why Use This Component?
- Abbreviation expansion without leaving the page or breaking reading flow.
- Linked glossary — optionally navigate to a terminology page on click.
- Accessible — uses native
titleandaria-labelattributes for screen readers. - Preset-aware — the color accent uses the active preset's primary color.
Usage
Options
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The text to wrap with a tooltip. Required. |
title | string | — | Expanded abbreviation shown on hover. Required. |
to | string | undefined | undefined | Link target. When set, renders as a <Link> instead of <abbr>. |
color | boolean | undefined | undefined | Set to true to add a color accent to the text. |
Troubleshooting
- Tooltip not showing — The tooltip uses the native HTML
titleattribute. It appears after a brief hover delay, which varies by browser. - Color accent — The
colorprop adds thenova-terminology-coloredCSS class. This is styled by the active preset. - Link not navigating — Ensure the
toprop points to a valid docs path. Withoutto, the component renders as a non-interactive<abbr>.