Tooltip

A component to display information on hover.

tooltip-demo.tsx

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipPortal,
  TooltipPositioner,
  TooltipPopup,
  TooltipArrow,
} from "@/components/ui/tooltip/tooltip";
import { Button } from "@/components/ui/button/button";

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button>Hover me</Button>} />
        <TooltipPortal>
          <TooltipPositioner>
            <TooltipPopup>
              <TooltipArrow />
              This is a tooltip with helpful information.
            </TooltipPopup>
          </TooltipPositioner>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/tooltip.json

Anatomy

anatomy

import {
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipPortal,
TooltipPositioner,
TooltipPopup,
TooltipArrow,
} from '../ui/tooltip'

<TooltipProvider>
  <Tooltip>
      <TooltipTrigger />
      <TooltipPortal>
          <TooltipPositioner>
              <TooltipPopup>
                  <TooltipArrow />
              </TooltipPopup>
          </TooltipPositioner>
      </TooltipPortal>
  </Tooltip>
</TooltipProvider>