Tooltip

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

Overview

The Tooltip component provides contextual information for UI elements. It's 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>

Basic

A simple tooltip with a trigger element. The tooltip appears on hover and focus, positioned above the trigger by default.

Sides

Use the side prop on TooltipContent to position the tooltip relative to the trigger. The tooltip will automatically flip 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 the asChild prop on TooltipTrigger to merge tooltip behavior into an existing interactive element like a Button, without adding an extra wrapper.

tsx

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

Delay

Control how quickly tooltips appear using the delay prop on TooltipTrigger, or set a global default via TooltipProvider.

tsx

// Per-trigger delay
<TooltipTrigger delay={400}>Hover me</TooltipTrigger>

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

Rich Content

Tooltips can contain any React content — not just text. Use custom className to control 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>

Alignment

Use the align prop on TooltipContent to control where the tooltip aligns relative to the trigger along the cross axis.

Props

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 is a convenience wrapper that 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.
`delayDuration`	`number`	—	Radix compat — alias for `delay`.

Additionally, all components accept standard HTML attributes for their underlying elements.

Composition

For advanced use cases, you can 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>

Usage 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 the asChild prop when wrapping interactive elements like buttons

Don't

Don't put essential information only in a tooltip — 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 — it creates a noisy experience
Don't use tooltips on touch-only interfaces — hover isn't available

PreviousToast

NextBadge