{figure("Won", "$286,400", "62% of quota")}
{figure(
<>
Commit
,
"$412,000",
"9 deals",
)}
);
}
```
## Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| `term` | `string` | | The term as the page writes it ("Commit"); names the ? for screen readers ("What is Commit?"). |
| `id` | `string` | | The glossary key, when it isn't the term in lower case with dashes. |
| `showTerm` | `boolean` | `false` | Also write the term before the ?, for a label that has no text of its own. |
| `align` | `"start" \| "center" \| "end"` | `"start"` | |
Full docs: https://notchset.dev/components/explain
## Customising
- Colours: every part reads the foundation's roles (`--ns-canvas`, `--ns-ink`, `--ns-line`, `--ns-signal` …), which read your shadcn tokens (`--background`, `--foreground`, `--border`, `--destructive` …), plus the optional `--success` and `--warning`. Retheme on `:root` or any container; never add Tailwind colour classes inside the component.
- Dark mode follows the `.dark` class or `data-theme="dark"` on an ancestor (the shadcn and next-themes conventions).
- Update later: Commit or stash local changes first (or copy the files), so the update can be undone. Read https://notchset.dev/r/changelog.json for the new versions: a major version, an entry marked breaking or a merge says what to change. Then re-run the install with `--overwrite`, on a branch. It replaces the component's files, the shared helper files they import, and the item's CSS rules in the global stylesheet, so review the whole diff (components, shared files, CSS), re-apply your own edits, and run the app's typecheck, tests and build.
## Accessibility contract (preserve when editing)
## Install
```bash
npx shadcn@latest add https://notchset.dev/r/explain.json
```
Or add the `@notchset` registry to components.json and run `npx shadcn@latest add @notchset/explain`. Every components.json style gets the same files.
## Continue the workflow
- [Bottom sheet](https://notchset.dev/components/bottom-sheet)
- [Command menu](https://notchset.dev/components/command-menu)
- [Dialog](https://notchset.dev/components/dialog)
## Source
### components/ui/notchset/explain.tsx
```tsx
// Notchset explain 2.0.0 · https://notchset.dev/changelog
"use client";
import * as React from "react";
import { Popover } from "@base-ui/react/popover";
import { BookOpen, CircleHelp } from "lucide-react";
import { cn } from "@/lib/utils";
import { popupPositioner, popupSurface } from "@/lib/notchset/popup";
import { usePortalContainer } from "@/lib/notchset/portal";
import { useReturnFocus } from "@/lib/notchset/return-focus";
/*
* Explain: "What is this?" where the word is. A quiet ? beside a hard term (Commit, Weighted pipeline, Velocity)
* opens two sentences on what it means, what counts and what doesn't, and one link to more in Help. A popover on
* a desktop, the standard bottom sheet on a phone. It opens on press, Enter or Space; Escape or a press outside
* closes it and focus goes back to the ?.
*
* The words come from one glossary the app configures, so a term reads the same on every page:
*
*