Command Palette

Search for a command to run...

Loading component...

Components Free Custom tooltip

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/skiper101

Why 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

Click on the top right
to view the 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

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

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.
Custom tooltip | Skiper UI | Skiper UI