Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Tooltip Positions for React

Four outline buttons labeled top, bottom, left and right. Each tooltip opens on that side and reads Tooltip on top, and so on.

Four outline buttons read top, bottom, left and right. Each tooltip names its side, such as Tooltip on top, and opens on that side of the button.

Place a tooltip on the side with room, usually the top. A Popover is the one to use if the content is taller than a line. In React, Base UI does not write those side labels.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Tooltip anatomy: content, positioner, arrow, trigger

Usage

<TooltipProvider>
  <div className="flex flex-wrap gap-4">
    {sides.map((side) => (
      <Tooltip key={side}>
        <TooltipTrigger
          render={<Button className="capitalize" variant="outline" />}
        >
          {side}
        </TooltipTrigger>
        <TooltipContent side={side}>
          <p>Tooltip on {side}</p>
        </TooltipContent>
      </Tooltip>
    ))}
  </div>
</TooltipProvider>

FAQ

When should I specify tooltip side positioning?

When the default would cover something people need to see, or the trigger sits near an edge: bottom for a toolbar at the top of the page, right for a sidebar on the left. Leave it unset for most triggers. Set side on TooltipContent, for example bottom.

What is the default tooltip position if side is not specified?

The top: the Tooltip opens above its trigger and centers on it.

How does automatic collision detection work with side?

When the Tooltip would overflow the viewport on the side you chose, it flips to the opposite side and shifts along the edge to stay visible. Scroll the trigger toward an edge to see it flip.

Can I control tooltip alignment along the side?

Yes, it is centered by default and can align with the start or the end of the trigger. Set align to start, center or end on TooltipContent.

How do I adjust tooltip distance from the trigger?

Keep the gap small, a few pixels, so the Tooltip reads as part of its trigger. Set sideOffset on TooltipContent; it defaults to 4.

Do tooltip positions matter on mobile touch devices?

Less, because touch screens have no hover and a Tooltip mostly shows on focus. On a narrow screen any side can run out of room, so leave the flipping on and keep the text short.

API Reference

Tooltip

Sets side={side}. The rest is on the Tooltip page.

Button

Sets variant="outline". The rest is on the Button page.

All 8 tooltip examples