Tooltip

Overlays

A short contextual label shown on hover or focus.

Live preview

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { IconButton, Tooltip } from "@nphuonha/ui-kit";
import { CopyIcon, MagnifyingGlassIcon, ShareIcon } from "@phosphor-icons/react";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Tooltip content="Copy to clipboard">
  <IconButton aria-label="Copy">...</IconButton>
</Tooltip>

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
content	ReactNode	—	Tooltip text.
children	ReactElement	—	Trigger element.
side	"top" \| "bottom" \| "left" \| "right"	"top"	Preferred placement.
align	"start" \| "center" \| "end"	"center"	Alignment along the trigger.
delay	number	300	Open delay in milliseconds.