Skip to content

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

Free

Tooltip Positions for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not write those side labels.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Tooltip anatomy: content, positioner, arrow, trigger

Usage

<div class="flex flex-wrap gap-4">
  <Tooltip v-for="side in sides" :key="side" :positioning="{ placement: side }">
    <TooltipTrigger :asChild="true">
      <Button class="capitalize" variant="outline">{{ side }}</Button>
    </TooltipTrigger>
    <TooltipContent><p>Tooltip on {{ side }}</p></TooltipContent>
  </Tooltip>
</div>

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. Pass positioning with a placement such as bottom to Tooltip.

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. Use a placement such as top-start or bottom-end.

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 gutter in positioning; Tooltip uses 4 when you don't pass positioning.

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 v-for="side in sides", key="side", positioning="{ placement: side }" and asChild. The rest is on the Tooltip page.

Button

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

All 8 tooltip examples