Tooltip

PreviewCopy Anchor Link

UsageCopy Anchor Link

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@vitnode/core/components/ui/tooltip'

<Tooltip>
  <TooltipTrigger
    render={
      <Button aria-label="Bookmark thread" size="icon" variant="outline">
        <BookmarkIcon />
      </Button>
    }
  />
  <TooltipContent>Bookmark thread</TooltipContent>
</Tooltip>

A tooltip is a hint, not a label. Icon buttons still need their own aria-label.

Shorter syntaxCopy Anchor Link

TooltipWithContent does the same in one component when you don't need props on the trigger.

import { TooltipWithContent } from '@vitnode/core/components/ui/tooltip'

<TooltipWithContent text="Reply">
  <Button aria-label="Reply" size="icon" variant="ghost">
    <MessageSquareIcon />
  </Button>
</TooltipWithContent>

Delay and warm-upCopy Anchor Link

Tooltips wait 200ms, so they don't flash as the cursor passes by. Once one is open, its neighbours open instantly. Hover the left row, then slide along it.

VitNode already mounts a TooltipProvider for the whole app. Wrap a section in another one to change its timing:

<TooltipProvider delay={0}>
  <Toolbar />
</TooltipProvider>

Side and shortcutsCopy Anchor Link

TooltipContent takes side (default top), align and sideOffset (default 8). Drop a Kbd inside to show a shortcut. It restyles itself for the dark tooltip.

<TooltipContent side="right">
  Save draft
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>S</Kbd>
  </KbdGroup>
</TooltipContent>

GroupCopy Anchor Link

In a toolbar, wrap the buttons in TooltipGroup and use TooltipGroupTrigger. They share one tooltip that glides from button to button, resizes to fit and slides the text in from the direction you came.

import {
  TooltipGroup,
  TooltipGroupTrigger,
} from '@vitnode/core/components/ui/tooltip'

<TooltipGroup>
  <div aria-label="Formatting" role="toolbar">
    <TooltipGroupTrigger
      content="Bold"
      render={<Button aria-label="Bold" size="icon-sm" variant="ghost" />}
    >
      <BoldIcon />
    </TooltipGroupTrigger>
  </div>
</TooltipGroup>

TooltipGroup takes side, sideOffset and align. A TooltipWithContent without extra props joins the group on its own. With reduced motion on, the tooltip jumps instead of gliding.

PropsCopy Anchor Link

API ReferenceCopy Anchor Link

Base UI - Tooltip