Tooltip

An accessible tooltip built on Base UI with spring-based keyframe scale and translation animations powered by Motion.

tooltip.tsx

Loading code…

Base UI tooltip with spring bounce motion physics and arrow pointer.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/base/tooltip.tsx

Loading code…

Update the import paths to match your project setup.

Add the TooltipProvider to the root of your app.

app/layout.tsx

import { TooltipProvider } from "@/components/sora-ui/base/tooltip";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  );
}

File Structure

tooltip.tsx

use-controlled-state.tsx

Usage

import { Button } from "@/components/sora-ui/base/button";
import {
  Tooltip,
  TooltipArrow,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/sora-ui/base/tooltip";
import { BookmarkIcon } from "lucide-react";

export default function Page() {
  return (
    <TooltipProvider delay={100}>
      <Tooltip>
        <TooltipTrigger
          render={
            <Button size="icon" variant="outline">
              <BookmarkIcon className="size-4" />
              <span className="sr-only">Add to library</span>
            </Button>
          }
        />
        <TooltipContent side="top">
          Add to library
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Props

Prop	Type	Default
`open?`	`boolean`	-
`defaultOpen?`	`boolean`	`false`
`onOpenChange?`	`(open: boolean) => void`	-

TooltipProvider

Prop	Type	Default
`delay?`	`number`	`0`
`closeDelay?`	`number`	-
`skipDelayDuration?`	`number`	-

TooltipContent

Prop	Type	Default
`side?`	`"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"`	`"top"`
`sideOffset?`	`number`	`4`
`align?`	`"start" \| "center" \| "end"`	`"center"`
`alignOffset?`	`number`	`0`
`transition?`	`Transition`	`{ visualDuration: 0.3, type: "spring", bounce: 0.6 }`
`className?`	`string`	-

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/base/tooltip.tsx

Loading code…

Update the import paths to match your project setup.

Add the TooltipProvider to the root of your app.

app/layout.tsx

import { TooltipProvider } from "@/components/sora-ui/base/tooltip";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  );
}

File Structure

tooltip.tsx

use-controlled-state.tsx

Usage

import { Button } from "@/components/sora-ui/base/button";
import {
  Tooltip,
  TooltipArrow,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/sora-ui/base/tooltip";
import { BookmarkIcon } from "lucide-react";

export default function Page() {
  return (
    <TooltipProvider delay={100}>
      <Tooltip>
        <TooltipTrigger
          render={
            <Button size="icon" variant="outline">
              <BookmarkIcon className="size-4" />
              <span className="sr-only">Add to library</span>
            </Button>
          }
        />
        <TooltipContent side="top">
          Add to library
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Props

Prop	Type	Default
`open?`	`boolean`	-
`defaultOpen?`	`boolean`	`false`
`onOpenChange?`	`(open: boolean) => void`	-

Prop	Type	Default
`delay?`	`number`	`0`
`closeDelay?`	`number`	-
`skipDelayDuration?`	`number`	-

Prop	Type	Default
`side?`	`"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"`	`"top"`
`sideOffset?`	`number`	`4`
`align?`	`"start" \| "center" \| "end"`	`"center"`
`alignOffset?`	`number`	`0`
`transition?`	`Transition`	`{ visualDuration: 0.3, type: "spring", bounce: 0.6 }`
`className?`	`string`	-

Tooltip · Base UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

Add the TooltipProvider to the root of your app.

File Structure

Usage

Props

TooltipProvider

TooltipContent

On this page

Tooltip · Base UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

Add the TooltipProvider to the root of your app.

File Structure

Usage

Props

Tooltip

TooltipProvider

TooltipContent

On this page