Tooltip

Tooltips display a brief, informative message that appears when a user interacts with an element.

Storybook @nextui-org/tooltip React Aria Source Styles source

Installation

npx nextui-cli@latest add tooltip

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

For individual installation, please note that you should add ./node_modules/@nextui-org/theme/dist/components/popover.js to your tailwind.config.js file instead since tooltip reuses popover styles.

Usage

With Arrow

Colors

Placements

Offset

Controlled

With Delay

You can control the open and close delay of the tooltip with delay and closeDelay props.

Hovering over the second button shows the tooltip immediately. If you wait for a delay before hovering another element, the delay restarts.

Custom Content

Custom Motion

Tooltip offers a motionProps property to customize the enter / exit animation.

Learn more about Framer motion variants here.

Slots

base: The main tooltip slot, it wraps the tooltip content.
arrow: The arrow slot, it wraps the tooltip arrow, the placement of the arrow is based on the tooltip placement, e.g. data-[placement=top]:....

Custom Styles

You can customize the Tooltip component by passing custom Tailwind CSS classes to the component slots.

Data Attributes

Tooltip has the following attributes on the base element:

data-open: When the tooltip is open. Based on tooltip state.
data-placement: The placement of the tooltip. Based on placement prop. The arrow element is positioned based on this attribute.
data-disabled: When the tooltip is disabled. Based on isDisabled prop.

Accessibility

Keyboard focus management and cross browser normalization.
Hover management and cross browser normalization.
Labeling support for screen readers (aria-describedby).
Exposed as a tooltip to assistive technology via ARIA.
Matches native tooltip behavior with delay on hover of first tooltip and no delay on subsequent tooltips.

API

Prop	Type	Default
`children*`	`ReactNode[]`
`content`	`ReactNode`
`size`	`sm \| md \| lg`	`"md"`
`color`	`default \| primary \| secondary \| success \| warning \| danger`	`"default"`
`radius`	`none \| sm \| md \| lg \| full`	`"md"`
`shadow`	`none \| sm \| md \| lg`	`"sm"`
`placement`	`TooltipPlacement`	`"top"`
`delay`	`number`	`"0"`
`closeDelay`	`number`	`"500"`
`isOpen`	`boolean`
`defaultOpen`	`boolean`
`offset`	`number`	`"7"`
`containerPadding`	`number`	`"12"`
`crossOffset`	`number`	`"0"`
`showArrow`	`boolean`	`false`
`shouldFlip`	`boolean`	`true`
`triggerScaleOnOpen`	`boolean`	`true`
`shouldBlockScroll`	`boolean`	`true`
`isKeyboardDismissDisabled`	`boolean`	`false`
`isDismissable`	`boolean`	`false`
`shouldCloseOnBlur`	`boolean`	`true`
`motionProps`	`MotionProps`
`portalContainer`	`HTMLElement`	`"document.body"`
`updatePositionDeps`	`any[]`	`"[]"`
`isDisabled`	`boolean`	`false`
`disableAnimation`	`boolean`	`false`
`classNames`	`Record<"base"｜"content", string>`

Prop	Type	Default
`onOpenChange`	`(isOpen: boolean) => void`
`shouldCloseOnInteractOutside`	`(e: HTMLElement) => void`
`onClose`	`() => void`

type TooltipPlacement =
  | "top"
  | "bottom"
  | "right"
  | "left"
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end"
  | "left-start"
  | "left-end"
  | "right-start"
  | "right-end";

Motion Props

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/