Tooltip

A small label that appears on hover or keyboard focus to describe the element beneath the pointer.

Default

tsx

import { Button, Tooltip } from "@hummingbirdui/react";

export default function TooltipDefault() {
  return (
    <Tooltip>
      <Tooltip.Trigger asChild>
        <Button variant="outline">Hover me</Button>
      </Tooltip.Trigger>
      <Tooltip.Content>Tooltip on hover</Tooltip.Content>
    </Tooltip>
  );
}

Placement

Pass side ("top" | "right" | "bottom" | "left") to Tooltip.Content to choose which edge of the trigger the tooltip points from.

tsx

import { Button, Tooltip } from "@hummingbirdui/react";

export default function TooltipPlacement() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Top</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="top">On top</Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Right</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="right">On the right</Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Bottom</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="bottom">On the bottom</Tooltip.Content>
      </Tooltip>

      <Tooltip>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Left</Button>
        </Tooltip.Trigger>
        <Tooltip.Content side="left">On the left</Tooltip.Content>
      </Tooltip>
    </div>
  );
}

Delay

Each Tooltip wraps its own provider, so delayDuration on the Tooltip tunes how long the pointer must rest before it opens.

tsx

import { Button, Tooltip } from "@hummingbirdui/react";

export default function TooltipDelay() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Tooltip delayDuration={0}>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Instant</Button>
        </Tooltip.Trigger>
        <Tooltip.Content>Opens immediately</Tooltip.Content>
      </Tooltip>

      <Tooltip delayDuration={700}>
        <Tooltip.Trigger asChild>
          <Button variant="outline">Delayed</Button>
        </Tooltip.Trigger>
        <Tooltip.Content>Waits before opening</Tooltip.Content>
      </Tooltip>
    </div>
  );
}

Provider

Mounting a single Tooltip.Provider shares one delayDuration and the skip-delay behavior across every tooltip beneath it.

tsx

import { Button, Tooltip } from "@hummingbirdui/react";

export default function TooltipProviderExample() {
  return (
    <Tooltip.Provider delayDuration={200} skipDelayDuration={300}>
      <div className="flex flex-wrap justify-center gap-2">
        <Tooltip>
          <Tooltip.Trigger asChild>
            <Button variant="outline">Save</Button>
          </Tooltip.Trigger>
          <Tooltip.Content>Save changes</Tooltip.Content>
        </Tooltip>

        <Tooltip>
          <Tooltip.Trigger asChild>
            <Button variant="outline">Copy</Button>
          </Tooltip.Trigger>
          <Tooltip.Content>Copy to clipboard</Tooltip.Content>
        </Tooltip>

        <Tooltip>
          <Tooltip.Trigger asChild>
            <Button variant="outline">Delete</Button>
          </Tooltip.Trigger>
          <Tooltip.Content>Delete item</Tooltip.Content>
        </Tooltip>
      </div>
    </Tooltip.Provider>
  );
}

API Reference

Built on the Radix UI Tooltip primitive. Each part forwards all props to its Radix counterpart.

Tooltip.Provider

Wraps your app to provide global functionality to your tooltips. Renders no DOM element of its own.

Prop	Type	Default
`delayDuration`	`number`	`0`
`skipDelayDuration`	`number`	`300`
`disableHoverableContent`	`boolean`	—

Contains all the parts of a tooltip. Each Tooltip wraps itself in its own Tooltip.Provider with a delayDuration of 0, so tooltips open instantly unless a delay is set. Renders no DOM element of its own.

Prop	Type	Default
`defaultOpen`	`boolean`	—
`open`	`boolean`	—
`onOpenChange`	`function`	—
`delayDuration`	`number`	`0`
`disableHoverableContent`	`boolean`	—

Tooltip.Trigger

The button that toggles the tooltip. By default, the Tooltip.Content will position itself against the trigger.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"closed" \| "delayed-open" \| "instant-open"`

Tooltip.Content

The component that pops out when the tooltip is open. Renders inside a portal and includes the tooltip arrow automatically; children are wrapped in an inner tooltip-inner element.

Prop	Type	Default
`asChild`	`boolean`	`false`
`aria-label`	`string`	—
`onEscapeKeyDown`	`function`	—
`onPointerDownOutside`	`function`	—
`forceMount`	`boolean`	—
`side`	`enum`	`"top"`
`sideOffset`	`number`	`6`
`align`	`enum`	`"center"`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`Boundary`	`[]`
`collisionPadding`	`number \| Padding`	`0`
`arrowPadding`	`number`	`0`
`sticky`	`enum`	`"partial"`
`hideWhenDetached`	`boolean`	`false`
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"closed" \| "delayed-open" \| "instant-open"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`

CSS Variable	Description
`--radix-tooltip-content-transform-origin`	The `transform-origin` computed from the content and arrow positions/offsets.
`--radix-tooltip-content-available-width`	The remaining width between the trigger and the boundary edge.
`--radix-tooltip-content-available-height`	The remaining height between the trigger and the boundary edge.
`--radix-tooltip-trigger-width`	The width of the trigger.
`--radix-tooltip-trigger-height`	The height of the trigger.

Styling

Hummingbird React tooltip is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available tooltip classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousTabs