Components

Gooey Tooltip

A gooey tooltip component with micro interactions

V0

Installation

file_type_light_pnpm

$ pnpm dlx shadcn@latest add https://vatsalrana.dev/r/gooey-tooltip.json

Usage

import {
      GooeyTooltip,
      GooeyTooltipContent,
      GooeyTooltipTrigger,
    } from "@/components/gooey-tooltip"
<GooeyTooltip>
  <GooeyTooltipTrigger>
    Hover me
  </GooeyTooltipTrigger>
  <GooeyTooltipContent>
    <p>You Hovered</p>
  </GooeyTooltipContent>
</GooeyTooltip>

API Reference

GooeyTooltip

Prop

GooeyTooltipTrigger

Prop

GooeyTooltipContent

Prop

Side

use the side prop to change the position of the tooltip

Disable

use the disabled prop to disable the trigger while keeping the tooltip available