Data

Tooltip

Text hint shown on hover (after a delay) and on keyboard focus. Rendered in a portal with role tooltip and wired to the trigger via aria-describedby.

Import

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

Examples

Basic

Hover or focus the button to reveal the tooltip.

<Tooltip content="Save your changes">
  <Button variant="outline">Save</Button>
</Tooltip>

Placement

<Tooltip content="Top" placement="top"><Button variant="outline">Top</Button></Tooltip>
<Tooltip content="Right" placement="right"><Button variant="outline">Right</Button></Tooltip>
<Tooltip content="Bottom" placement="bottom"><Button variant="outline">Bottom</Button></Tooltip>
<Tooltip content="Left" placement="left"><Button variant="outline">Left</Button></Tooltip>

No delay

`delay` only applies to pointer hover — focus always opens immediately.

<Tooltip content="Opens instantly" delay={0}>
  <Button variant="outline">Instant</Button>
</Tooltip>

API

Tooltip props

Prop	Type	Default	Description
`content` *	`ReactNode`	—	Tooltip text / node.
`children` *	`ReactElement`	—	Single trigger element; handlers and `aria-describedby` are cloned onto it.
`placement`	`Placement`	`"top"`	Preferred side / alignment relative to the trigger.
`delay`	`number`	`200`	Open delay in ms for pointer hover (focus opens immediately).
`showArrow`	`boolean`	`true`	Renders a small arrow pointing at the trigger. The bubble and arrow expose the resolved side via a data-side attribute for CSS targeting.
`disabled`	`boolean`	`false`	Never opens while true.
`open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`	—	Controlled and uncontrolled open state.
`classNames`	`Partial<Record<"root" \| "arrow", string>>`	—	Per-slot class overrides: root targets the bubble (alongside className), arrow the arrow element. Applied after module classes and also in unstyled mode.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

Keyboard

Key	Action
`Tab`	Focusing the trigger opens the tooltip immediately.
`Escape`	Closes the open tooltip.