Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

radix-ui.com

Basic

Default

<div className="flex items-center justify-center p-8">
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger asChild={true}>
        <Button variant="outline">
          Hover me
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>
          This is a tooltip
        </p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</div>

Custom Delay

<div className="flex items-center justify-center p-8">
  <TooltipProvider delayDuration={500}>
    <Tooltip>
      <TooltipTrigger asChild={true}>
        <Button variant="outline">
          Delayed Tooltip
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>
          Shown after 500ms
        </p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</div>

Positioning

Top

<div className="flex items-center justify-center p-8">
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger asChild={true}>
        <Button variant="outline" size="small">
          Top
        </Button>
      </TooltipTrigger>
      <TooltipContent side="top">
        <p>
          Tooltip on top
        </p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</div>

Right

<div className="flex items-center justify-center p-8">
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger asChild={true}>
        <Button variant="outline" size="small">
          Right
        </Button>
      </TooltipTrigger>
      <TooltipContent side="right">
        <p>
          Tooltip on right
        </p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</div>

Bottom

<div className="flex items-center justify-center p-8">
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger asChild={true}>
        <Button variant="outline" size="small">
          Bottom
        </Button>
      </TooltipTrigger>
      <TooltipContent side="bottom">
        <p>
          Tooltip on bottom
        </p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</div>

Left

<div className="flex items-center justify-center p-8">
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger asChild={true}>
        <Button variant="outline" size="small">
          Left
        </Button>
      </TooltipTrigger>
      <TooltipContent side="left">
        <p>
          Tooltip on left
        </p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</div>