Tooltip

A Tooltip can be used to display some content when user hovers on another element.

Source

View source code

Issues

Report an issue

Package

@rootui/tooltip

Reference

React Aria docs

Preview

Hover me to open the tooltip

placement

delay

closeDelay

offset

isDisabled

1<Tooltip>
2  <Tooltip.Trigger>
3    Hover me to open the tooltip
4  </Tooltip.Trigger>
5  <Tooltip.Content>
6    Hello, I'm the content!
7  </Tooltip.Content>
8</Tooltip>

Anatomy

1<Tooltip>
2  <Tooltip.Trigger></Tooltip.Trigger>
3  <Tooltip.Content></Tooltip.Content>
4</Tooltip>

Installation

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/tooltip

Usage

1import { Tooltip } from "@rootui/tooltip";
2
3export default function Page() {
4  return (
5    <Tooltip>
6      <Tooltip.Trigger>I'm the trigger</Tooltip.Trigger>
7      <Tooltip.Content>I'm the content</Tooltip.Content>
8    </Tooltip>
9  )
10}

API Reference

See the React Aria documentation for more information.

Prop	Type	Default
`isDisabled`	`Boolean`	`-`
Whether the tooltip should be disabled, independent from the trigger.
`delay`	`Number`	`300`
The delay time for the tooltip to show up.
`closeDelay`	`Number`	`500`
The delay time for the tooltip to close.
`trigger`	`'hover' \| 'focus'`	`'hover'`
By default, opens for both focus and hover. Can be made to open only for focus.
`shouldCloseOnPress`	`Boolean`	`true`
Whether the tooltip should close when the trigger is pressed.
`isOpen`	`Boolean`	`-`
Whether the tooltip is open by default (controlled).
`defaultOpen`	`Boolean`	`-`
Whether the tooltip is open by default (uncontrolled).
`onOpenChange`	`(isOpen: boolean) => void`	`-`
Handler that is called when the tooltip's open state changes.
`children`	`ReactNode`	`-`

Tooltip.Trigger

Prop	Type	Default
`children`	`ReactNode`	`-`

Prop	Type	Default
`placement`	`'top' \| 'bottom' \| 'right' \| 'left'`	`'top'`
The placement of the element with respect to its anchor element.
`showArrow`	`Boolean`	`true`

`arrowProps`	`ComponentProps<'svg'>`	`-`

`customArrow`	`ReactElement`	`-`

`shouldUpdatePosition`	`Boolean`	`false`
Whether the tooltip content (overlay) should update its position automatically.
`maxHeight`	`Number`	`-`
The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
`isOpen`	`Boolean`	`-`
Whether the overlay is open by default (controlled).
`defaultOpen`	`Boolean`	`-`
Whether the overlay is open by default (uncontrolled).
`onOpenChange`	`Boolean`	`(isOpen: boolean) => void`

`shouldFlip`	`Boolean`	`true`
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
`offset`	`Number`	`8`
The additional offset applied along the main axis between the element and its anchor element.
`crossOffset`	`Number`	`0`
The additional offset applied along the cross axis between the element and its anchor element.

Attribute	Description
`data-placement="left \| right \| top \| bottom"`	The placement of the tooltip relative to the trigger.
`data-entering`	Whether the tooltip is currently entering. Use this to apply animations.
`data-exiting`	Whether the tooltip is currently exiting. Use this to apply animations.

CSS variable	Description
`--trigger-anchor-point`	The position of the trigger relative to the tooltip. Use with transform-origin when applying scale transitions.