Tooltip

Overview

Tooltip shows a small hint anchored to an element when the user hovers or focuses it. It’s built on Radix UI Tooltip , so it opens on hover and keyboard focus, dismisses on blur or Esc, and includes a pointer arrow.

Keep tooltips short and only use them to add non-essential (but helpful) hints or expanded content. For rich or interactive overlays use a Popover . The content renders in a portal, so it escapes overflow clipping.

Usage

Import the parts:

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "@eqtylab/equality";

Wrap the app (or a section) in a single TooltipProvider, then compose a trigger and content. Use asChild so your own element (like a Button or Icon Button ) becomes the trigger:

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="tertiary">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

TooltipProvider shares timing (open/close delays) across all tooltips within it, so place one high in your tree rather than wrapping each tooltip individually.

Default

Placement

Use side and align on TooltipContent to position the tooltip relative to its trigger, and sideOffset to adjust the gap.

<TooltipContent side="right" align="center">
  <p>Shown to the right</p>
</TooltipContent>

Width

TooltipContent caps itself at 32rem, and narrows further to the room Radix measures when the trigger sits near a viewport edge, so long content wraps instead of running off screen. Retheme the --container-tooltip token to move the cap everywhere.

For a one-off, mark the override important — the component’s own styles sit outside Tailwind’s layers, so a plain utility loses to them:

<TooltipContent className="max-w-md!">
  <p>Narrower than the default</p>
</TooltipContent>

Slots

Props

The parts forward their Radix Tooltip props (and className). The most commonly used are below.