Terminology
Inline glossary block 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 block renders an <abbr> with a title attribute set to the expanded abbreviation (or a <Link> with both title and aria-label when to is provided). 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 Block?
- Abbreviation expansion without leaving the page or breaking reading flow.
- Linked glossary — optionally navigate to a terminology page on click.
- Accessible — uses the native
titleattribute for screen readers, plusaria-labelon the linked variant. - 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. |
className | string | undefined | undefined | Additional class names merged with the base nova-terminology class. |
style | CSSProperties | undefined | undefined | Inline style overrides applied to the root element. |
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 block renders as a non-interactive<abbr>.