Tooltip

A short label that appears on hover after a delay and immediately on focus.

Import

tsx

import { Tooltip } from "@merid/react";

<Tooltip content="Copies the link to your clipboard">
<IconButton label="Copy link" icon={<CopyIcon />} variant="secondary" />
</Tooltip>

Tooltip is a single component. Its child must be one focusable element that forwards its ref, such as Button or IconButton. The tooltip adds aria-describedby and pointer and focus handlers to that element.

tsx

<Tooltip content="…">
  <Button />
</Tooltip>

Examples

Placement

<Tooltip content="On the top" placement="top"><Button variant="secondary" size="sm">top</Button></Tooltip>
<Tooltip content="On the right" placement="right"><Button variant="secondary" size="sm">right</Button></Tooltip>
<Tooltip content="On the bottom" placement="bottom"><Button variant="secondary" size="sm">bottom</Button></Tooltip>
<Tooltip content="On the left" placement="left"><Button variant="secondary" size="sm">left</Button></Tooltip>

Delay and disabled

tsx

<Tooltip content="Saved" delay={0}>…</Tooltip>
<Tooltip content="Unavailable offline" disabled={isOnline}>…</Tooltip>

API reference

Prop	Type	Default	Description
`content`Required	`ReactNode`	–	Tooltip text. Keep it short and non-interactive.
`children`Required	`ReactElement`	–	A single focusable element (e.g. an icon Button). Receives aria-describedby.
`open`	`boolean`	–	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	–	Called when the open state should change.
`delay`	`number`	`400`	Hover delay before opening, in ms. Focus opens immediately.
`placement`	`Placement`	`"top"`	Preferred placement.
`sideOffset`	`number`	`6`	Distance from the trigger in px.
`className`	`string`	–	Class name for the tooltip bubble.
`disabled`	`boolean`	`false`	Do not show the tooltip.
`container`	`Element \| null`	`document.body`	Portal target. `undefined` uses `document.body`; `null` renders nothing until the target exists.

Styling

.mrd-tooltip is the bubble: --mrd-tooltip-bg / --mrd-tooltip-fg, --mrd-radius-sm, --mrd-shadow-lg, 280px max width, z-index: var(--mrd-z-tooltip). It carries data-state="open" and pointer-events: none.

Accessibility

Follows the WAI-ARIA Tooltip pattern. The bubble has role="tooltip" and is linked to the trigger with aria-describedby while open. Touch pointers do not open it, so never put essential information only in a tooltip. An icon-only trigger still needs its own accessible name (IconButton's label).

Key	Action
`Tab`	Focusing the trigger shows the tooltip immediately; moving focus away hides it.
`Esc`	Hides the tooltip.

Guidelines

Use a tooltip to name an icon-only control or add a brief hint.

Avoid

Put links, buttons or long text in a tooltip; use a Popover.

Popover for interactive content.
IconButton