Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
'use client';
import { Button } from '@/components/ui/button';
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
export function TooltipDefault() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant='outline'>Hover me</Button>} />
<TooltipPopup>Add to library</TooltipPopup>
</Tooltip>
</TooltipProvider>
);
}
Installation
Usage
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"<TooltipProvider>
<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipPopup>Tooltip content</TooltipPopup>
</Tooltip>
</TooltipProvider>Examples
Positions
Use the side prop on TooltipPopup to control the position.
'use client';
import { Button } from '@/components/ui/button';
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
export function TooltipPositions() {
return (
<TooltipProvider>
<div className='flex gap-4'>
<Tooltip>
<TooltipTrigger render={<Button variant='outline'>Top</Button>} />
<TooltipPopup side='top'>Tooltip on top</TooltipPopup>
</Tooltip>
<Tooltip>
<TooltipTrigger render={<Button variant='outline'>Right</Button>} />
<TooltipPopup side='right'>Tooltip on right</TooltipPopup>
</Tooltip>
<Tooltip>
<TooltipTrigger render={<Button variant='outline'>Bottom</Button>} />
<TooltipPopup side='bottom'>Tooltip on bottom</TooltipPopup>
</Tooltip>
<Tooltip>
<TooltipTrigger render={<Button variant='outline'>Left</Button>} />
<TooltipPopup side='left'>Tooltip on left</TooltipPopup>
</Tooltip>
</div>
</TooltipProvider>
);
}