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. The popup stays mounted and
animates open and closed with Motion, so positioning stays
with Base UI's Positioner and is never animated.
Installation
npx shadcn@latest add @kosori/tooltipExample
tooltip-example.tsx
'use client';
import { buttonVariants } from '@/components/ui/button';
import { Tooltip, TooltipPopup, TooltipTrigger } from '@/components/ui/tooltip';
const TooltipExample = () => (
<Tooltip>
<TooltipTrigger
render={
<button
className={buttonVariants({ variant: 'outline' })}
type='button'
/>
}
>
Hover me
</TooltipTrigger>
<TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
);
export default TooltipExample;
Usage
'use client';
import { buttonVariants } from '@/components/ui/button';
import {
Tooltip,
TooltipPopup,
TooltipTrigger,
} from '@/components/ui/tooltip';
const TooltipDemo = () => (
<Tooltip>
<TooltipTrigger
render={
<button
className={buttonVariants({ variant: 'outline' })}
type='button'
/>
}
>
Hover me
</TooltipTrigger>
<TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
);