Copy to clipboard
A tooltip
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip><Tooltip>
<TooltipTrigger>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip>
Installation
Copy to clipboard
npx bearnie add tooltip
npx bearnie add tooltipnpx bearnie add tooltip
bunx bearnie add tooltip
bunx bearnie add tooltipbunx bearnie add tooltip
pnpm dlx bearnie add tooltip
pnpm dlx bearnie add tooltippnpm dlx bearnie add tooltip
yarn dlx bearnie add tooltip
yarn dlx bearnie add tooltipyarn dlx bearnie add tooltip
Usage
import {
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@/components/bearnie/tooltip"<Tooltip>
<TooltipTrigger>
<Button>Hover</Button>
</TooltipTrigger>
<TooltipContent>
Tooltip text
</TooltipContent>
</Tooltip>Examples
Side top
Copy to clipboard
Top tooltip
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Top</Button>
</TooltipTrigger>
<TooltipContent side="top">
<p>Tooltip on top</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Top</Button>
</TooltipTrigger>
<TooltipContent side="top">
<p>Tooltip on top</p>
</TooltipContent>
</Tooltip><Tooltip>
<TooltipTrigger>
<Button variant="outline">Top</Button>
</TooltipTrigger>
<TooltipContent side="top">
<p>Tooltip on top</p>
</TooltipContent>
</Tooltip>
Side bottom
Copy to clipboard
Bottom Tooltip
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Bottom</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>Tooltip on bottom</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Bottom</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>Tooltip on bottom</p>
</TooltipContent>
</Tooltip><Tooltip>
<TooltipTrigger>
<Button variant="outline">Bottom</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>Tooltip on bottom</p>
</TooltipContent>
</Tooltip>
Side left
Copy to clipboard
Tooltip on left
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Left</Button>
</TooltipTrigger>
<TooltipContent side="left">
<p>Tooltip on left</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Left</Button>
</TooltipTrigger>
<TooltipContent side="left">
<p>Tooltip on left</p>
</TooltipContent>
</Tooltip><Tooltip>
<TooltipTrigger>
<Button variant="outline">Left</Button>
</TooltipTrigger>
<TooltipContent side="left">
<p>Tooltip on left</p>
</TooltipContent>
</Tooltip>
Side right
Copy to clipboard
Tooltip on right
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Right</Button>
</TooltipTrigger>
<TooltipContent side="right">
<p>Tooltip on right</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Right</Button>
</TooltipTrigger>
<TooltipContent side="right">
<p>Tooltip on right</p>
</TooltipContent>
</Tooltip><Tooltip>
<TooltipTrigger>
<Button variant="outline">Right</Button>
</TooltipTrigger>
<TooltipContent side="right">
<p>Tooltip on right</p>
</TooltipContent>
</Tooltip>
With icon button
Copy to clipboard
Add to library
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="outline">
<Plus />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="outline">
<Plus />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip><Tooltip>
<TooltipTrigger>
<Button iconOnly variant="outline">
<Plus />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
Toolbar
Copy to clipboard
Bold
Italic
Underline
<div class="flex gap-1">
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="ghost" size="sm">
<Bold />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Bold</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="ghost" size="sm">
<Italic />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Italic</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="ghost" size="sm">
<Underline />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Underline</p>
</TooltipContent>
</Tooltip>
</div>
<div class="flex gap-1">
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="ghost" size="sm">
<Bold />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Bold</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="ghost" size="sm">
<Italic />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Italic</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="ghost" size="sm">
<Underline />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Underline</p>
</TooltipContent>
</Tooltip>
</div><div class="flex gap-1">
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="ghost" size="sm">
<Bold />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Bold</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="ghost" size="sm">
<Italic />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Italic</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<Button iconOnly variant="ghost" size="sm">
<Underline />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Underline</p>
</TooltipContent>
</Tooltip>
</div>
Anatomy
Tooltip- The root containerTooltipTrigger- The element that shows the tooltip on hoverTooltipContent- The tooltip text panel
Props
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | top | right | bottom | left | top | Position relative to trigger |
| class | string | - | Additional CSS classes |
All other Tooltip components accept class for additional CSS classes.