Tooltip

A popup displaying information when an element receives keyboard focus or mouse hover.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/tooltip

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  TooltipRoot,
  TooltipTrigger,
  TooltipPortal,
  TooltipContent,
  TooltipArrow,
} from '@melio-ui/tooltip';

TooltipRoot: All parts of the tooltip are included.
TooltipTrigger: Used to activate or open the Tooltip component.
TooltipPortal: Portal the overlay and content portion into the body.
TooltipContent: Includes the content that will be displayed in the open tooltip.
TooltipArrow: An optional arrow element for the tooltip, to be rendered within TooltipContent for visual association.

Another way to import

'use client';

import { Tooltip } from '@melio-ui/tooltip';

<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <button>Tooltip</button>
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content>
      tooltip message
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>;

'use client' must be used when rendering on the server side.

API Reference

TooltipRoot

All parts of the tooltip are included.

Prop	Type	Default	Description
open	`boolean`	-	Sets whether the tooltip content is open or closed.
defaultOpen	`boolean`	-	When first rendered, the tooltip content is in an opened state. Use when there is no need to control the opened state.
onOpenChange	`(open: boolean) => void`	-	This is an event handler that is triggered when the open state of the tooltip content changes.

TooltipTrigger

Used to activate or open the Tooltip component.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

Data attribute	Values
[data-state]	"open" \| "closed"

TooltipPortal

Portal the overlay and content portion into the body.

Prop	Type	Default	Description
container	`HTMLElement \| (() => HTMLElement)`	document.body	Specifies the container element to which the content should be portaled.

TooltipContent

Includes the content that will be displayed in the open tooltip.

Prop	Type	Default	Description
side	`"top" \| "right" \| "bottom" \| "left"`	"top"	The ideal side of the trigger to render on when it's open.
sideOffset	`number`	0	The pixel distance from the trigger.
align	`"start" \| "center" \| "end"`	"center"	The desired alignment with the trigger, which may adjust if collisions happen.
alignOffset	`number`	0	A pixel offset from the "start" or "end" alignment choices.

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"top" \| "right" \| "bottom" \| "left"
[data-align]	"start" \| "center" \| "end"

TooltipArrow

An optional arrow element for the tooltip, to be rendered within TooltipContent for visual association.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.
width	`number`	10	The arrow's width measured in pixels.
height	`number`	5	The arrow's height measured in pixels.

Examples

Display arrow

<TooltipRoot>
  <TooltipTrigger asChild>
    <button type="button" style={{ width: 200, border: '1px solid #5f76bb', padding: 5 }}>
      Hover me
    </button>
  </TooltipTrigger>
  <TooltipPortal>
    <TooltipContent>
      tooltip message
      <TooltipArrow />
    </TooltipContent>
  </TooltipPortal>
</TooltipRoot>

Position Settings

<TooltipRoot>
  <TooltipTrigger asChild>
    <button type="button" style={{ width: 200, border: '1px solid #5f76bb', padding: 5 }}>
      Hover me
    </button>
  </TooltipTrigger>
  <TooltipPortal>
    <TooltipContent side="bottom" align="end">
      tooltip message
      <TooltipArrow />
    </TooltipContent>
  </TooltipPortal>
</TooltipRoot>

Toast