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

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