Tooltip

<Tooltip>
<TooltipTrigger>
  <Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
  <p>This is a tooltip</p>
</TooltipContent>
</Tooltip>

Installation

npx bearnie add tooltip

import Tooltip from "@/components/ui/tooltip/Tooltip.astro";
import TooltipTrigger from "@/components/ui/tooltip/TooltipTrigger.astro";
import TooltipContent from "@/components/ui/tooltip/TooltipContent.astro";

Usage

import {
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@/components/ui/tooltip"

<Tooltip>
<TooltipTrigger>
  <Button>Hover</Button>
</TooltipTrigger>
<TooltipContent>
  Tooltip text
</TooltipContent>
</Tooltip>

Examples

Side top

<Tooltip>
<TooltipTrigger>
  <Button variant="outline">Top</Button>
</TooltipTrigger>
<TooltipContent side="top">
  <p>Tooltip on top</p>
</TooltipContent>
</Tooltip>

Side bottom

<Tooltip>
<TooltipTrigger>
  <Button variant="outline">Bottom</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
  <p>Tooltip on bottom</p>
</TooltipContent>
</Tooltip>

Side left

<Tooltip>
<TooltipTrigger>
  <Button variant="outline">Left</Button>
</TooltipTrigger>
<TooltipContent side="left">
  <p>Tooltip on left</p>
</TooltipContent>
</Tooltip>

Side right

<Tooltip>
<TooltipTrigger>
  <Button variant="outline">Right</Button>
</TooltipTrigger>
<TooltipContent side="right">
  <p>Tooltip on right</p>
</TooltipContent>
</Tooltip>

With icon button

<Tooltip>
<TooltipTrigger>
  <Button iconOnly variant="outline">
    <Plus />
  </Button>
</TooltipTrigger>
<TooltipContent>
  <p>Add to library</p>
</TooltipContent>
</Tooltip>

<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 container
TooltipTrigger - The element that shows the tooltip on hover
TooltipContent - 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.

Installation

Usage

Examples

Side top

Side bottom

Side left

Side right

With icon button

Toolbar

Anatomy

Props

TooltipContent