Tooltip

Tooltips display brief, informative text when a user hovers over or focuses on an element.

Examples

Side

Align

Content

Wrapping other components

Delay

Rich content

Overview

Tooltip provides contextual information for UI elements. Built on Base UI for full accessibility and composability, with a styled dark appearance that works across all backgrounds.

tsx

import { Tooltip, TooltipTrigger, TooltipContent } from "@rogo-technologies/ui/tooltip";

<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipContent>Helpful information</TooltipContent>
</Tooltip>;

Usage

Sides

Use the side prop on TooltipContent to position the tooltip. It automatically flips to the opposite side if there isn't enough space.

tsx

<Tooltip>
  <TooltipTrigger>Bottom</TooltipTrigger>
  <TooltipContent side="bottom">Appears below</TooltipContent>
</Tooltip>

Wrapping other components

Use asChild on TooltipTrigger to merge tooltip behavior into an existing interactive element.

tsx

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline" iconOnly aria-label="Copy">
      <IconSquareBehindSquare1 />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Copy to clipboard</TooltipContent>
</Tooltip>

Delay

tsx

<TooltipTrigger delay={400}>Hover me</TooltipTrigger>

<TooltipProvider delay={200}>
  {/* All tooltips inherit 200ms delay */}
</TooltipProvider>

Tooltips under a TooltipProvider form a group: the first one waits for its delay, and while one is open the next opens instantly however long its own delay is. timeout is how long after the last one closes that the group keeps opening instantly. Delay the first tooltip in a group and let peers follow instantly — a row of icons should cost one wait, not one per icon, and delay={0} is not that: it fires a tooltip at every icon a passing cursor crosses.

Rich content

Tooltips accept any React content. Use className for custom sizing and layout.

tsx

<TooltipContent className="flex max-w-xs flex-col gap-1 px-3 py-2">
  <span className="font-semibold">Keyboard shortcuts</span>
  <span className="text-secondary-inverted text-[11px]">Press ⌘K to open the command palette.</span>
</TooltipContent>

Composition

For advanced cases, compose the lower-level primitives directly instead of using TooltipContent.

tsx

import {
  Tooltip,
  TooltipTrigger,
  TooltipPortal,
  TooltipPositioner,
  TooltipPopup,
} from "@rogo-technologies/ui/tooltip";

<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipPortal>
    <TooltipPositioner side="top" sideOffset={8}>
      <TooltipPopup>Custom tooltip</TooltipPopup>
    </TooltipPositioner>
  </TooltipPortal>
</Tooltip>;

API

Tooltip (Root)

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes.
`delayDuration`	`number`	-	Radix compat: forwarded as `delay` to trigger.

TooltipTrigger

Prop	Type	Default	Description
`delay`	`number`	`600`	Milliseconds before tooltip appears.
`closeDelay`	`number`	`0`	Milliseconds before tooltip hides.
`asChild`	`boolean`	`false`	Merges props onto child element instead of wrapping.
`disabled`	`boolean`	`false`	Prevents the tooltip from appearing.

TooltipContent

TooltipContent composes TooltipPortal, TooltipPositioner, and TooltipPopup into a single component.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Which side of the trigger to position on.
`sideOffset`	`number`	`4`	Distance from the trigger in pixels.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment along the cross axis.
`alignOffset`	`number`	`0`	Offset along the alignment axis.
`hidden`	`boolean`	`false`	When true, content is not rendered.
`className`	`string`	-	Additional CSS classes for the popup.

TooltipProvider

Prop	Type	Default	Description
`delay`	`number`	`600`	Default delay for all nested tooltips.
`closeDelay`	`number`	`0`	Default close delay.
`timeout`	`number`	`400`	How long after a tooltip closes that the next still opens instantly.
`delayDuration`	`number`	-	Radix compat: alias for `delay`.

All components accept standard HTML attributes for their underlying elements.

Guidelines

Do

Use tooltips for supplementary information that isn't essential to the task
Keep tooltip text concise: ideally under 80 characters
Add tooltips to icon-only buttons to clarify their purpose
Use TooltipProvider at the app root for consistent delay behavior
Use asChild when wrapping interactive elements like buttons

Don't

Don't put essential information only in a tooltip, since users may never see it
Don't use tooltips for complex interactive content (use a popover instead)
Don't add tooltips to elements that already have clear labels
Don't set delay to 0 globally, since it creates a noisy experience
Don't use tooltips on touch-only interfaces, since hover isn't available

PreviousToast

NextEmpty State