Chewypixel component
Tooltip
A tooltip on a frosted panel that scales in from its trigger and fades out when you move away.
Installation
npx shadcn@latest add https://chewypixel.io/r/tooltip.jsonUsage
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
export function ShareButton() {
return (
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Share</Button>
</TooltipTrigger>
<TooltipContent>Copy a link to this page</TooltipContent>
</Tooltip>
);
}Props
sideWhich side of the trigger it opens on. Goes on TooltipContent.
"top" | "right" | "bottom" | "left" = "top"
sideOffsetThe gap between the trigger and the tooltip, in pixels. Goes on TooltipContent.
number = 6
delayDurationHow long to hover before it opens, in milliseconds. Goes on Tooltip or TooltipProvider.
number = 0
Released under the MIT License.
More components
- DialogA dialog that springs up over a light overlay and animates out before it closes.
- SheetA side panel that slides in from any edge of the screen over a light overlay.
- Dropdown MenuA frosted menu that scales out of its trigger and animates out when it closes.
- CommandA command palette whose highlight glides between results as you move through them.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.