Command Palette
Search for a command to run...
Loading component...
Custom tooltip
A custom tooltip component built with Radix UI primitives, featuring smooth animations, arrow indicators, and flexible positioning options
Dependencies
Interaction Type
| Hover to see tooltip | |
| Watch arrow animation |
npx shadcn add @skiper-ui/skiper101Why not the shadcn tooltip
The shadcn tooltip is great, but I wasn't a fan of the arrow design. So I built this one using the same Radix UI base, but with a better arrow and a nice outline for the bottom arrow. I also tweaked the content styling to make it look cooler. If you need a tooltip with better visuals, feel free to use this one!
How to use
import { Skiper102, Tooltip, TooltipTrigger, TooltipContent, } from "@/components/v1/skiper101"; // Using the demo component const DemoSkiper101 = () => { return ( <div className="h-screen w-full"> <Skiper102 /> </div> ); }; // Using the tooltip components directly const CustomTooltip = () => { return ( <Tooltip> <TooltipTrigger> <div> <p>Tooltip</p> </div> </TooltipTrigger> <TooltipContent> <p>Tooltip Content</p> </TooltipContent> </Tooltip> ); };
Props | Description |
|---|---|
sideOffset | Distance from trigger |
className | Additional CSS classes |
Source code
Keep in mind
Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.
Contact
License & Usage:
- Free to use and modify in both personal and commercial projects.
- Attribution to Skiper UI is required when using the free version.
- No attribution required with Skiper UI Pro.