Tooltip

Last updated on March 19, 2026 at 3:59 PM

Tooltips are brief, informative messages used to introduce new content and features or provide brief step-by-step guidance.

#Usage

The Tooltip component is a Base UI component.

<Tooltip>
  <TooltipTrigger render={<Button>Hover me</Button>} />
  <TooltipContent>This action cannot be undone</TooltipContent>
</Tooltip>

#Side

The Tooltip comes with 4 sides: top (default), bottom, left, right.

<Tooltip>
  <TooltipTrigger
    render={
      <Button isIconOnly>
        <IconArrowUp />
      </Button>
    }
  />
  <TooltipContent side="top">Top side</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger
    render={
      <Button isIconOnly>
        <IconArrowDown />
      </Button>
    }
  />
  <TooltipContent side="bottom">Bottom side</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger
    render={
      <Button isIconOnly>
        <IconArrowLeft />
      </Button>
    }
  />
  <TooltipContent side="left">Left side</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger
    render={
      <Button isIconOnly>
        <IconArrowRight />
      </Button>
    }
  />
  <TooltipContent side="right">Right side</TooltipContent>
</Tooltip>