Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tooltip examples · Standard

Tooltip Positions for React

Four buttons whose tooltips open on the top, the bottom, the left and the right.

Framework
UI library

A tooltip that opens over the thing someone is working on gets in the way. This React example shows the four sides a Tooltip can open on, one button each, all from the same component with Base UI doing the positioning. The Tooltip flips to the opposite side when there is no room, so a pinned side never pushes it off screen. Use it for toolbars near an edge, table actions and navigation items.

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

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.

All 8 tooltip examples