Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element.

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export default function Basic() {
  return (
    <TooltipProvider delayDuration={0}>
      <Tooltip>
        <TooltipTrigger>Hover</TooltipTrigger>
        <TooltipContent>
          <p>New Project</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export default function Position() {
  return (
    <>
      <TooltipProvider delayDuration={0}>
        <Tooltip>
          <TooltipTrigger>Top</TooltipTrigger>
          <TooltipContent side="top">
            <p>New Project</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <TooltipProvider delayDuration={0}>
        <Tooltip>
          <TooltipTrigger>Bottom</TooltipTrigger>
          <TooltipContent side="bottom">
            <p>New Project</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <TooltipProvider delayDuration={0}>
        <Tooltip>
          <TooltipTrigger>Left</TooltipTrigger>
          <TooltipContent side="left">
            <p>New Project</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <TooltipProvider delayDuration={0}>
        <Tooltip>
          <TooltipTrigger>Right</TooltipTrigger>
          <TooltipContent side="right">
            <p>New Project</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </>
  );
}