Tooltip

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download tooltip -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { TooltipTrigger, Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import * as React from "react";
export default function TooltipExample() {
  const [open, setOpen] = React.useState(false);
  return (
    <TooltipTrigger isOpen={open} onOpenChange={setOpen}>
      <Button variant="secondary">Hover or focus</Button>
      <Tooltip placement="top">
        Add to library
      </Tooltip>
    </TooltipTrigger>
  );
}

Examples

Default

import { TooltipTrigger, Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
<TooltipTrigger>
  <Button variant="tertiary">Hover me</Button>
  <Tooltip>Add to library</Tooltip>
</TooltipTrigger>;

Sides

import { TooltipTrigger, Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
<div className="flex gap-4">
  {(["top", "right", "bottom", "left"] as const).map((placement) => (
    <TooltipTrigger key={placement}>
      <Button variant="tertiary">{placement}</Button>
      <Tooltip placement={placement}>{placement}</Tooltip>
    </TooltipTrigger>
  ))}
</div>;

Alignments

import { TooltipTrigger, Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
<div className="flex gap-4">
  {(["bottom start", "bottom", "bottom end"] as const).map((placement) => (
    <TooltipTrigger key={placement}>
      <Button>{placement}</Button>
      <Tooltip placement={placement}>Tooltip</Tooltip>
    </TooltipTrigger>
  ))}
</div>;

Logical Sides

import { TooltipTrigger, Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
<div dir="rtl" className="flex gap-4">
  {(["start", "end"] as const).map((placement) => (
    <TooltipTrigger key={placement}>
      <Button>{placement}</Button>
      <Tooltip placement={placement}>Tooltip</Tooltip>
    </TooltipTrigger>
  ))}
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

This component adds no props of its own to React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.