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

Demo

Code

Hover me

Installation

lunar add tooltip

Usage

import {
Tooltip,
TooltipTrigger,
TooltipContent,
} from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';
import { Text } from '@/components/ui/text';

Basic Usage

<Tooltip>
<TooltipTrigger asChild>
  <Button variant="outline" size="icon">
    <Plus size={16} />
  </Button>
</TooltipTrigger>
<TooltipContent>
  Add to library
</TooltipContent>
</Tooltip>

API Reference

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Content

TooltipTrigger

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Trigger element
`asChild`	`boolean`	`false`	Merges props with child component

TooltipContent

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Tooltip content
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Preferred side
`sideOffset`	`number`	`4`	Distance from trigger
`className`	`string`	—	Custom styles

Tooltip

Installation

Usage

Basic Usage

API Reference

Tooltip

TooltipTrigger

TooltipContent

On this page