Tooltip

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

Default

tsx

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

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

Placement

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

tsx

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

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

      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Right</Button>
        </TooltipTrigger>
        <TooltipContent side="right">On the right</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Bottom</Button>
        </TooltipTrigger>
        <TooltipContent side="bottom">On the bottom</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Left</Button>
        </TooltipTrigger>
        <TooltipContent side="left">On the left</TooltipContent>
      </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,
  TooltipTrigger,
  TooltipContent,
} from "@hummingbirdui/react";

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

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

Provider

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

tsx

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

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

        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">Copy</Button>
          </TooltipTrigger>
          <TooltipContent>Copy to clipboard</TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">Delete</Button>
          </TooltipTrigger>
          <TooltipContent>Delete item</TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}

API Reference

For detailed usage guidelines, see the Radix UI documentation.

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