Tooltip

A pop-up that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add tooltip

Variants & Examples

Default Tooltip

A basic tooltip that appears on hover.

Code for Default Tooltip

1import { Button } from "@/components/ui/button"
2import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
3
4export function DefaultTooltip() {
5  return (
6    <TooltipProvider>
7      <Tooltip>
8        <TooltipTrigger asChild>
9          <Button variant="outline">Hover</Button>
10        </TooltipTrigger>
11        <TooltipContent>
12          <p>Add to library</p>
13        </TooltipContent>
14      </Tooltip>
15    </TooltipProvider>
16  )
17}

Props

These are the available props for the Tooltip component:

Prop	Type	Description	Default
open	boolean	Controls the open state of the tooltip.	-
onOpenChange	(open: boolean) => void	Event handler called when the open state changes.	-
defaultOpen	boolean	The initial open state of the tooltip.	false
delayDuration	number	The duration in milliseconds before the tooltip opens.	700