Tooltip
A popup that appears when an element is hovered or focused, showing a hint for sighted users.
Tooltip wraps the Base UI Tooltip
primitive, positions its popup with Base UI's Positioner and marks each part
with data-slot. Grouped and detached triggers are available through
TooltipProvider and TooltipCreateHandle.
Installation
npx shadcn@latest add @kosori/tooltipExample
tooltip-example.tsx
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipPopup, TooltipTrigger } from '@/components/ui/tooltip';
const TooltipExample = () => (
<Tooltip>
<TooltipTrigger render={<Button variant='outline' />}>
Hover me
</TooltipTrigger>
<TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
);
export default TooltipExample;
Usage
import { Button } from '@/components/ui/button';
import {
Tooltip,
TooltipPopup,
TooltipTrigger,
} from '@/components/ui/tooltip';
const TooltipDemo = () => (
<Tooltip>
<TooltipTrigger render={<Button variant='outline' />}>
Hover me
</TooltipTrigger>
<TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
);