Components

Tooltip

Short label on hover / focus. Reserve for icon-only controls or short amplifications — anything longer belongs in the UI itself.

When to useto name an icon-only control or explain a compact metric — one short line the operator only needs on demand.

Import

import { Tooltip, TooltipTrigger, TooltipContent } from "@ravnhq/efni/tooltip"

Default

<Tooltip>
  <TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
  <TooltipContent>Explains what this field does.</TooltipContent>
</Tooltip>

Accessibility

Key	Action
`Focus / Hover`	Open the tooltip.
`Escape / Blur`	Close it.

TooltipProvider is mounted at the app root with delayDuration=200.
Never use a tooltip as the only source of information — screen readers may not announce it. Give icon-only controls an aria-label AND a tooltip.
Don't nest interactive elements inside a tooltip — a tooltip is descriptive, not clickable.

Guidelines

Keep the content to one line, sentence case.
Use for icon-only affordances — a copy button, a filter reset.
Prefer aria-label + tooltip so keyboard and pointer users both get the name.

Don't

Don't put actions or links inside a tooltip — use Popover or Hover card.
Don't tooltip the obvious (e.g. "Save" over a Save button).
Don't rely on tooltips to explain form fields — use FormDescription.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the tooltip is currently open.
`onOpenChange`	`((open: boolean, eventDetails: TooltipRoot.ChangeEventDetails) => void)`	—	Event handler called when the tooltip is opened or closed.
`TooltipTrigger.render`	`React.ReactElement \| ComponentRenderFn<RenderFunctionProps, State>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`TooltipContent.side`	`"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"`	`"top"`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`TooltipContent.align`	`"center" \| "start" \| "end"`	`"center"`	How to align the popup relative to the specified side.
`TooltipProvider.delay`	`number`	`0`	How long to wait before opening the tooltip on hover. Specified in milliseconds.
`TooltipProvider.closeDelay`	`number`	—	How long to wait before closing a tooltip. Specified in milliseconds.
`…props`	`TooltipPrimitive.Root.Props`	—	Everything Tooltip passes to the element it renders.