# Install the Basic Tooltip
npx shadcn@latest add http://localhost:3000/r/basic-tooltip.json

# Install the Hotkey Tooltip
npx shadcn@latest add http://localhost:3000/r/hotkey-tooltip.json

# Install the Icon Tooltip
npx shadcn@latest add http://localhost:3000/r/icon-tooltip.json

# Install the Progress Tooltip
npx shadcn@latest add http://localhost:3000/r/progress-tooltip.json

# Install the Rich Tooltip
npx shadcn@latest add http://localhost:3000/r/rich-tooltip.json

import { BasicTooltip } from "@/components/ui/basic-tooltip";
import { Info } from "lucide-react";

export default function HelpButton() {
  return (
    <BasicTooltip content="Learn more about our services" side="right">
      <button className="rounded-full p-2 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800">
        <Info className="size-5" />
      </button>
    </BasicTooltip>
  );
}

import { HotkeyTooltip } from "@/components/ui/hotkey-tooltip";
import { Save } from "lucide-react";

export default function SaveAction() {
  return (
    <HotkeyTooltip content="Save Document" keys={["⌘", "S"]} side="top">
      <button className="flex items-center justify-center p-2 rounded-lg border border-zinc-200 dark:border-zinc-800">
        <Save className="size-5" />
      </button>
    </HotkeyTooltip>
  );
}

import { ProgressTooltip } from "@/components/ui/progress-tooltip";

export default function UploadStatus() {
  return (
    <ProgressTooltip
      label="Uploading files"
      value={75}
      max={100}
      showPercentage={true}
      color="success"
    >
      <button className="text-sm font-semibold hover:underline">Checking status...</button>
    </ProgressTooltip>
  );
}