Tooltip

Installation

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

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

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

Usage

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} 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 (
    <TooltipProvider>
      <Tooltip open={open} onOpenChange={setOpen}>
        <TooltipTrigger asChild>
          <Button variant="secondary">Hover or focus</Button>
        </TooltipTrigger>
        <TooltipContent side="top">
          Add to library
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Examples

Default

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

Sides

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
<TooltipProvider>
  <div className="flex items-center gap-2">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="tertiary">Top</Button>
      </TooltipTrigger>
      <TooltipContent side="top">
        <p>Top side</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="tertiary">Right</Button>
      </TooltipTrigger>
      <TooltipContent side="right">
        <p>Right side</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="tertiary">Bottom</Button>
      </TooltipTrigger>
      <TooltipContent side="bottom">
        <p>Bottom side</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="tertiary">Left</Button>
      </TooltipTrigger>
      <TooltipContent side="left">
        <p>Left side</p>
      </TooltipContent>
    </Tooltip>
  </div>
</TooltipProvider>;

Alignments

import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
<TooltipProvider>
  <div className="flex flex-col gap-8">
    {(["top", "bottom"] as const).map((side) => (
      <div className="flex flex-col gap-3" key={side}>
        {(["start", "center", "end"] as const).map((align) => (
          <Tooltip key={`${side}-${align}`}>
            <TooltipTrigger asChild>
              <Button className="w-96" variant="tertiary">
                {side} / {align}
              </Button>
            </TooltipTrigger>
            <TooltipContent align={align} side={side}>
              <p>{align}</p>
            </TooltipContent>
          </Tooltip>
        ))}
      </div>
    ))}
  </div>
</TooltipProvider>;

Logical Sides

import { DirectionProvider } from "@/components/ui/direction";
import {
  TooltipProvider,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
<div className="flex flex-col gap-10">
  {(["ltr", "rtl"] as const).map((direction) => (
    <DirectionProvider direction={direction} key={direction}>
      <div dir={direction}>
        <p className="mb-3 text-sm">direction="{direction}"</p>
        <TooltipProvider>
          <div className="flex items-start gap-3">
            {(["inline-start", "inline-end"] as const).map((side) =>
              (["start", "center", "end"] as const).map((align) => (
                <Tooltip key={`${direction}-${side}-${align}`}>
                  <TooltipTrigger asChild>
                    <Button className="h-24" variant="tertiary">
                      {side === "inline-start" ? "is" : "ie"} / {align}
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent align={align} side={side}>
                    <p>{align}</p>
                  </TooltipContent>
                </Tooltip>
              )),
            )}
          </div>
        </TooltipProvider>
      </div>
    </DirectionProvider>
  ))}
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

This component adds no props of its own to Base UI.

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