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

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


The default Tooltip has the background color.


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


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

Text Colors

You can change the Tooltip text color with contentColor prop


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


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.


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-
keepMountedbooleantrue/falseKeep tooltip mounted on the DOMfalse
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-
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsdiv
...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';


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;
gradient blue backgroundgradient violet background