Tooltip
Updated
Tooltip describes the control it wraps in a solid ink tip. It shows on mouse hover after a short delay or at once on keyboard focus, hides on Escape, and flips or slides to stay on screen. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
Download the table as CSVShow gridlines behind the bars
import "@/components/dithercharts/controls.css"
import { Tooltip } from "@/components/dithercharts/tooltip"
// Wrap one focusable element; it gets aria-describedby pointing at the tip.
<Tooltip content="Download the table as CSV">
<Button onClick={exportCsv}>Export</Button>
</Tooltip>Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add tooltip
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| contentrequired | Type ReactNode | Default – | The tip. Keep it short: it's read as the trigger's description. |
| childrenrequired | Type ReactElement<{ "aria-describedby"?: string }> | Default – | One focusable element, e.g. a Button. It gets aria-describedby pointing at the tip. |
| collisionPadding | Type { top?: number } | Default 8 | Space in px the tip keeps clear at the window's top, e.g. a sticky header's height; it flips below to keep it. |
| className | Type string | Default – |