Tooltip v0.1.0 Overlay

Hover/focus tooltip with hover-intent delays driven by a four-state core machine (no flicker on quick re-entry).

import { Tooltip } from "latticeui-react";

Examples

Hover intent and placement

Show code

<Tooltip.Root>
  <Tooltip.Trigger>Hover me (600ms intent)</Tooltip.Trigger>
  <Tooltip.Content>Driven by a four-state core machine</Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root openDelay={0} placement="bottom">
  <Tooltip.Trigger>Instant tooltip</Tooltip.Trigger>
  <Tooltip.Content>openDelay={0}</Tooltip.Content>
</Tooltip.Root>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`trigger`	`button`	`[data-scope="tooltip"][data-part="trigger"]`
`positioner`	`div`	`[data-scope="tooltip"][data-part="positioner"]`
`content`	`div[role=tooltip]`	`[data-scope="tooltip"][data-part="content"]`
`arrow`	`div`	`[data-scope="tooltip"][data-part="arrow"]`

Props

Prop	Type	Default
`Root.openDelay`	`number`	`600`
`Root.closeDelay`	`number`	`200`
`Root.placement`	`Placement (floating-ui)`	`"top"`

Accessibility

Roles: tooltip

Key	Action
`Focus`	opens immediately (no delay)
`Escape`	closes

Trigger gets aria-describedby while the tooltip is open.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="tooltip"][data-part="content"] {
  /* your overrides */
}

State attributes: data-state=open