Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Installation
The Tooltip component is part of the @syner/ui package.
import { Tooltip, TooltipTrigger, TooltipContent } from '@syner/ui/components/tooltip';Usage
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip>Positioning
Tooltips can be positioned on different sides of the trigger element.
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Top</Button>
</TooltipTrigger>
<TooltipContent side="top">
<p>Top tooltip</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Right</Button>
</TooltipTrigger>
<TooltipContent side="right">
<p>Right tooltip</p>
</TooltipContent>
</Tooltip>With Custom Content
<Tooltip>
<TooltipTrigger asChild>
<Button>Info</Button>
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p className="font-semibold">Helpful Information</p>
<p className="text-xs">
This tooltip contains more detailed information about the action.
</p>
</TooltipContent>
</Tooltip>