Tooltip

Tooltips displays informative text when users hover, focus, or click an element.

import { Tooltip } from '@nextui-org/react';

Default

The default Tooltip has the background color.

Rounded

You can completely round the Tooltip corners with the rounded property.

Colors

You can change the color of the Tooltip with the property color.

Text Colors

You can change the Tooltip text color with contentColor prop

Rounded

You can completely round the corners of the tooltip with the rounded property.

Trigger

You can control the way to trigger the Tooltip wheater hover or click using the trigger property.

Placements

Change the placement of the tooltip with the placement prop

Not Arrow

In some cases you may need to remove the arrow from the tooltip for this case you can use the hideArrow property

Custom Content

You can customize the Tooltip content.

APIs

Tooltip Props

AttributeTypeAccepted valuesDescriptionDefault
contentReact.ReactNode string-Tooltip content-
colorTooltipTypes stringTooltipColorsChange tooltip background colordefault
contentColorSimpleColors stringSimpleColorsCheckbox tooltip text colordefault
placementPlacementPlacementTooltip placement relative to the targettop
initialVisiblebooleantrue/falseDetermine if the tooltip is visible on initialfalse
animatedbooleantrue/falseDisplay tooltip animationstrue
visiblebooleantrue/falseForce if the tooltip is visible or not-
shadowbooleantrue/falseDisplay shadow effectfalse
roundedbooleantrue/falseRounded tooltipfalse
hideArrowbooleantrue/falseHide tooltip arrow icon-
triggerTriggerTypesTriggerTypesTooltip trigger modehover
enterDelay(ms)number-Delay before tooltip is shown0
leaveDelay(ms)number-Delay before tooltip is hidden (only work in 'hover' mode)0
offset(px)number-Distance between tooltip and target12
portalClassNamestring-Tooltip box content className-
onVisibleChangenumberTooltipOnVisibleChangeCallback when tooltip visibility has changed-
...DivHTMLAttributes'className', 'id', ...Native div props-

Tooltip types

Tooltip Colors

type TooltipColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'invert';

Simple Colors

type SimpleColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error';

Placement

type Placement =
  | 'top'
  | 'topStart'
  | 'topEnd'
  | 'left'
  | 'leftStart'
  | 'leftEnd'
  | 'bottom'
  | 'bottomStart'
  | 'bottomEnd'
  | 'right'
  | 'rightStart'
  | 'rightEnd';

Trigger Types

type TriggerTypes = 'hover' | 'click';

Tooltip On Visible Change

type TooltipOnVisibleChange = (visible: boolean) => void;