Components · Overlays
Tooltip
Supplementary text on hover and focus.
On an icon button
import { IconButton, Tooltip } from '@rookcom/monarch-react';
// PlusIcon: demo icon from the docs site; use your own.
<Tooltip content="Copy link">
<IconButton label="Copy link" icon={<PlusIcon />} />
</Tooltip>Usage examples
The example at the top of the page is the only one for this component.
Purpose
Short supplementary text about a control, shown on hover and keyboard focus.
Use when
- Naming or clarifying an icon-only control.
Avoid when
- Essential information or interactive content: use Popover or visible text.
Design principles
- Never put essential information or interactive content in a tooltip.
- Mount TooltipProvider once near the root so the open delay is shared.
API reference
import { Tooltip, TooltipProvider } from '@rookcom/monarch-react';| Export | Kind | Rendering | Root class |
|---|---|---|---|
Tooltip | component | client | .mn-tooltip |
TooltipProvider | component | client | .mn-tooltip |
Tooltip wraps a single focusable child as the Radix trigger (asChild).
TooltipProvider sets delayDuration (default 400 ms) for all tooltips below it.
Generated from the TypeScript declarations of packages/react/src/components/overlays/tooltip.
Properties
Tooltip
Shows on hover and keyboard focus; Escape dismisses it.
| Prop | Type | Description |
|---|---|---|
children required | ReactElement<unknown, string | import("/home/runner/work/monarch/monarch/node_modules/@types/react/index").JSXElementConstructor<any>> | A single focusable element. |
content required | ReactNode | Supplementary text. Never put essential information or interactive content here. |
align | "center" | "start" | "end" | |
defaultOpen | boolean | |
onOpenChange | ((open: boolean) => void) | |
open | boolean | |
side | "top" | "right" | "bottom" | "left" |
TooltipProvider
Mount once near the root. Shares the open delay across tooltips.
| Prop | Type | Description |
|---|---|---|
children required | ReactNode | |
delayDuration | number |
Variants
| Prop | Values | Description |
|---|---|---|
side | 'top''right''bottom''left' | Preferred side. Default top. |
align | 'start''center''end' | Alignment on that side. Default center. |
States
| State | Exposed as | Behaviour |
|---|---|---|
| Open / closed | – | Controlled with open / onOpenChange or uncontrolled with defaultOpen. |
Interaction behaviour
- Opens after the provider delay on hover, and on keyboard focus.
- Escape dismisses it.
Keyboard support
| Keys | Action |
|---|---|
| Tab | Focusing the trigger opens the tooltip. |
| Escape | Dismisses the tooltip. |
Accessibility
- Role
- tooltip
- Accessible name
- Its text becomes the trigger’s accessible description.
- The trigger keeps its own accessible name; the tooltip only describes it.
Responsive behaviour
- At most 18rem wide. Hover does not exist on touch screens, so never rely on a tooltip there.
Theme support
- Inverse surface (
--mn-color-bg-inverse/--mn-color-text-inverse), so it contrasts with the page in light and dark themes.
Do and don't
Do
- Wrap a single focusable element.
Don't
- Do not use a tooltip as the only accessible name of a control; IconButton has
labelfor that.
Related components
Dependencies
| Kind | Depends on |
|---|---|
| npm packages | @radix-ui/react-tooltip |
| Monarch components | None |
Testing coverage
- Appears on keyboard focus and becomes the trigger’s accessible description.
- No axe violations in jsdom.
- Renders on the server.
| Check | Covered |
|---|---|
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |
Tests: packages/react/src/components/overlays/tooltip