Tooltip

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

Features

Configurable delay before showing.

Supports top, bottom, left, and right sides.

Can be controlled or uncontrolled.

Shows on hover and focus.

data-state and data-side attributes for styling.

Example

Anatomy


import { Tooltip } from '@wire-ui/react'
 
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>
<button>Hover me</button>
</Tooltip.Trigger>
<Tooltip.Content side="top">
Tooltip on top
</Tooltip.Content>
</Tooltip.Root>

Styling

Tooltip Content receives data-state and data-side. Use them to control visibility and position-aware styling.


<Tooltip.Content className="
  data-[state=closed]:hidden
  data-[side=top]:mb-2
  data-[side=bottom]:mt-2
  data-[side=left]:mr-2
  data-[side=right]:ml-2
" />

Using data attributes

Content sets data-state ("open" / "closed") and data-side ("top" / "bottom" / "left" / "right").


[data-state="closed"] { display: none; }
[data-side="top"]     { margin-bottom: 8px; }
[data-side="bottom"]  { margin-top: 8px; }

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"`

Keyboard Interactions

Key	Description
`Tab`	Shows the tooltip when trigger receives focus.
`Escape`	Closes the tooltip.