Tooltip

A popup that appears when an element is hovered or focused, showing a hint for sighted users.

import { Tooltip } from '@ontoui/react';

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger>Hover me</Tooltip.Trigger>
    <Tooltip.Content>This is a tooltip</Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>;

Anatomy

The Tooltip compound component is made up of the following parts:

Part	Description
`Tooltip.Provider`	Provides shared delay settings for multiple tooltips in a group.
`Tooltip.Root`	Root context provider. Manages open state.
`Tooltip.Trigger`	The element that the tooltip is attached to.
`Tooltip.Content`	The tooltip popup. Renders into a portal above the trigger.

Examples

Placement

Use the side prop on Tooltip.Content to control which side the tooltip appears on.

<Tooltip.Content side="right">Tooltip on right</Tooltip.Content>

API Reference

`Tooltip.Provider`

Prop	Type	Default
`children?`	`ReactNode`	—
`delay?`	`number`	—
`closeDelay?`	`number`	—
`timeout?`	`number`	—

`Tooltip.Root`

Prop	Type	Default
`children?`	`ReactNode`	—
`open?`	`boolean`	—
`onOpenChange?`	`(open: boolean) => void`	—
`defaultOpen?`	`boolean`	—
`disabled?`	`boolean`	—

`Tooltip.Trigger`

Prop	Type	Default
`children?`	`ReactNode`	—
`className?`	`string`	—
`render?`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	—
`ref?`	`Ref<HTMLButtonElement>`	—

`Tooltip.Content`

Prop	Type	Default
`children?`	`ReactNode`	—
`className?`	`string`	—
`side?`	`"top" \| "right" \| "bottom" \| "left"`	top
`sideOffset?`	`number`	8
`ref?`	`Ref<HTMLButtonElement>`	—