Tooltip

Hover/focus tooltip. Configurable delay and side. Controlled and uncontrolled.

Preview

Anatomy


import { Tooltip } from '@wire-ui/react'
 
<Tooltip.Root delayDuration={300}>
  <Tooltip.Trigger>
    <button>Hover me</button>
  </Tooltip.Trigger>
  <Tooltip.Content side="top">
    This is a tooltip
  </Tooltip.Content>
</Tooltip.Root>

Root props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial state for uncontrolled use
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes
`delayDuration`	`number`	`300`	Milliseconds before showing on hover

Content props

Prop	Type	Default	Description
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Preferred side to render

Content data attributes

Attribute	Values
`data-state`	`"open"` / `"closed"`
`data-side`	`"top"` / `"bottom"` / `"left"` / `"right"`