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

Trigger

You can control the way to trigger the Tooltip whether 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

Attribute	Type	Accepted values	Description	Default
content	`React.ReactNode` `string`	-	Tooltip content	-
color	`TooltipTypes` `string`	TooltipColors	Change tooltip background color	`default`
contentColor	`SimpleColors` `string`	SimpleColors	Checkbox tooltip text color	`default`
placement	`Placement`	Placement	Tooltip placement relative to the target	`top`
initialVisible	`boolean`	`true/false`	Determine if the tooltip is visible on initial	`false`
animated	`boolean`	`true/false`	Display tooltip animations	`true`
visible	`boolean`	`true/false`	Force if the tooltip is visible or not	-
shadow	`boolean`	`true/false`	Display shadow effect	`false`
rounded	`boolean`	`true/false`	Rounded tooltip	`false`
hideArrow	`boolean`	`true/false`	Hide tooltip arrow icon	-
keepMounted	`boolean`	`true/false`	Keep tooltip mounted on the DOM	`false`
*isDisabled	`boolean`	`true/false`	Whether the tooltip content should be displayed or not	`false`
trigger	`TriggerTypes`	TriggerTypes	Tooltip trigger mode	`hover`
enterDelay(ms)	`number`	-	Delay before tooltip is shown	`0`
leaveDelay(ms)	`number`	-	Delay before tooltip is hidden (only works in 'hover' mode)	`0`
offset(px)	`number`	-	Distance between tooltip and target	`12`
portalClassName	`string`	-	Tooltip box content className	-
onVisibleChange	`number`	TooltipOnVisibleChange	Callback when tooltip visibility has changed	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`DivHTMLAttributes`	`'className', 'id', ...`	Native div props	-

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';

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

Popover Dropdown

Created by Junior Garcia

Deployed on

Documentation