Tooltip | arctis/ui

Show a short hint when someone hovers over or focuses a control. If the preferred side would leave the viewport, the tooltip flips to remain visible.

tsx

1import { Button } from "@/components/ui/button"2import {3  Tooltip,4  TooltipContent,5  TooltipProvider,6  TooltipTrigger,7} from "@/components/ui/tooltip"89export function Example() {10  return (11    <TooltipProvider>12      <Tooltip>13        <TooltipTrigger asChild>14          <Button variant="outline">Hover</Button>15        </TooltipTrigger>16        <TooltipContent>Add to library</TooltipContent>17      </Tooltip>18    </TooltipProvider>19  )20}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add tooltip

Wrap your app, or just the section that uses tooltips, with TooltipProvider.

1import { TooltipProvider } from "@/components/ui/tooltip"23export default function Layout({ children }) {4  return <TooltipProvider>{children}</TooltipProvider>5}

Usage

1import { Button } from "@/components/ui/button"2import {3  Tooltip,4  TooltipContent,5  TooltipProvider,6  TooltipTrigger,7} from "@/components/ui/tooltip"

1<TooltipProvider>2  <Tooltip>3    <TooltipTrigger asChild>4      <Button variant="outline">Hover</Button>5    </TooltipTrigger>6    <TooltipContent>Add to library</TooltipContent>7  </Tooltip>8</TooltipProvider>

Composition

TooltipProvider
└── Tooltip
    ├── TooltipTrigger
    └── TooltipContent

Basic

Hover or focus the trigger to open the tooltip.

tsx

1import { Button } from "@/components/ui/button"2import {3  Tooltip,4  TooltipContent,5  TooltipProvider,6  TooltipTrigger,7} from "@/components/ui/tooltip"89export function Example() {10  return (11    <TooltipProvider>12      <Tooltip>13        <TooltipTrigger asChild>14          <Button variant="outline">Hover</Button>15        </TooltipTrigger>16        <TooltipContent>Add to library</TooltipContent>17      </Tooltip>18    </TooltipProvider>19  )20}

Side

Choose a preferred side with side. The tooltip picks another if that position would clip off-screen.

tsx

1import { Button } from "@/components/ui/button"2import {3  Tooltip,4  TooltipContent,5  TooltipProvider,6  TooltipTrigger,7} from "@/components/ui/tooltip"89export function Example() {10  return (11    <TooltipProvider>12      <div className="flex flex-wrap items-center gap-2">13        <Tooltip side="left">14          <TooltipTrigger asChild>15            <Button variant="outline">Left</Button>16          </TooltipTrigger>17          <TooltipContent>Opens on the left</TooltipContent>18        </Tooltip>19        <Tooltip side="top">20          <TooltipTrigger asChild>21            <Button variant="outline">Top</Button>22          </TooltipTrigger>23          <TooltipContent>Opens on top</TooltipContent>24        </Tooltip>25        <Tooltip side="bottom">26          <TooltipTrigger asChild>27            <Button variant="outline">Bottom</Button>28          </TooltipTrigger>29          <TooltipContent>Opens below</TooltipContent>30        </Tooltip>31        <Tooltip side="right">32          <TooltipTrigger asChild>33            <Button variant="outline">Right</Button>34          </TooltipTrigger>35          <TooltipContent>Opens on the right</TooltipContent>36        </Tooltip>37      </div>38    </TooltipProvider>39  )40}

Align

Use align to place the tooltip along the left, center, or right of the trigger. The arrow follows the alignment.

tsx

1import { Button } from "@/components/ui/button"2import {3  Tooltip,4  TooltipContent,5  TooltipProvider,6  TooltipTrigger,7} from "@/components/ui/tooltip"89export function Example() {10  return (11    <TooltipProvider>12      <div className="flex flex-wrap items-center gap-2">13        <Tooltip side="top" align="left">14          <TooltipTrigger asChild>15            <Button variant="outline">Left</Button>16          </TooltipTrigger>17          <TooltipContent>Aligned left</TooltipContent>18        </Tooltip>19        <Tooltip side="top" align="center">20          <TooltipTrigger asChild>21            <Button variant="outline">Center</Button>22          </TooltipTrigger>23          <TooltipContent>Aligned center</TooltipContent>24        </Tooltip>25        <Tooltip side="top" align="right">26          <TooltipTrigger asChild>27            <Button variant="outline">Right</Button>28          </TooltipTrigger>29          <TooltipContent>Aligned right</TooltipContent>30        </Tooltip>31      </div>32    </TooltipProvider>33  )34}

Shortcut

Add a keyboard shortcut beside the label when it is useful.

tsx

1import { Button } from "@/components/ui/button"2import {3  Tooltip,4  TooltipContent,5  TooltipProvider,6  TooltipTrigger,7} from "@/components/ui/tooltip"89export function Example() {10  return (11    <TooltipProvider>12      <Tooltip>13        <TooltipTrigger asChild>14          <Button variant="outline">Save</Button>15        </TooltipTrigger>16        <TooltipContent className="flex items-center gap-2">17          Save changes18          <span className="text-background/60">⌘S</span>19        </TooltipContent>20      </Tooltip>21    </TooltipProvider>22  )23}

Disabled

Disabled buttons do not fire pointer events. Wrap the button in a span so the tooltip can still open.

tsx

1import { Button } from "@/components/ui/button"2import {3  Tooltip,4  TooltipContent,5  TooltipProvider,6  TooltipTrigger,7} from "@/components/ui/tooltip"89export function Example() {10  return (11    <TooltipProvider>12      <Tooltip>13        <TooltipTrigger asChild>14          <span className="inline-flex">15            <Button variant="outline" disabled>16              Disabled17            </Button>18          </span>19        </TooltipTrigger>20        <TooltipContent>Unavailable right now</TooltipContent>21      </Tooltip>22    </TooltipProvider>23  )24}

API Reference

TooltipProvider

Optional. Sets shared delay and keeps only one tooltip open at a time.

Prop	Type	Default
delayDuration	number	200
skipDelayDuration	number	300
children	ReactNode	—

1<TooltipProvider>2  <Tooltip>3    <TooltipTrigger asChild>4      <Button variant="outline">Hover</Button>5    </TooltipTrigger>6    <TooltipContent>Hint</TooltipContent>7  </Tooltip>8</TooltipProvider>

Prop	Type	Default
side	"top" \| "bottom" \| "left" \| "right"	"top"
align	"left" \| "center" \| "right"	"center"
sideOffset	number	4
delayDuration	number	—
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—
children	ReactNode	—

1<Tooltip>2  <TooltipTrigger asChild>3    <Button variant="outline">Hover</Button>4  </TooltipTrigger>5  <TooltipContent>Hint</TooltipContent>6</Tooltip>

TooltipTrigger

Prop	Type	Default
asChild	boolean	false
className	string	—

1<TooltipTrigger asChild>2  <Button variant="outline">Hover</Button>3</TooltipTrigger>

TooltipContent

Prop	Type	Default
side	"top" \| "bottom" \| "left" \| "right"	—
align	"left" \| "center" \| "right"	—
sideOffset	number	—
className	string	—

1<TooltipContent>Hint</TooltipContent>