Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

1
import { Button } from "@/components/ui/pxl/button";
2
import {
3
  Tooltip,
4
  TooltipContent,
5
  TooltipTrigger,
6
} from "@/components/ui/pxl/tooltip";
7

8
export default function TooltipDemo() {
9
  return (
10
    <Tooltip>
11
      <TooltipTrigger render={<Button variant="outline">Hover</Button>} />
12
      <TooltipContent>
13
        <p>Add to library</p>
14
      </TooltipContent>
15
    </Tooltip>
16
  );
17
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/tooltip

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import type { ComponentProps } from "react";
2

3
import { cn } from "@/lib/utils";
4

5
function Textarea({ className, ...props }: ComponentProps<"textarea">) {
6
  return (
7
    <div
8
      data-slot="textarea-wrapper"
9
      className={cn(
10
        "pr-1.5 pb-1.5 pixel-border pixel-color-input pixel-size-[3px] has-[textarea:focus-visible]:pixel-color-ring has-[textarea:disabled]:opacity-50 has-[textarea[aria-invalid=true]]:pixel-color-destructive",
11
        className,
12
      )}
13
    >
14
      <textarea
15
        data-slot="textarea"
16
        className="flex field-sizing-content min-h-16 w-full bg-transparent px-2.5 py-2 text-base transition-[color] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm"
17
        {...props}
18
      />
19
    </div>
20
  );
21
}
22

23
export { Textarea };

Update the import paths to match your project setup.

Add the TooltipProvider to the root of your app.

1
import { TooltipProvider } from "@/components/ui/pxl/tooltip"
2

3
export default function RootLayout({ children }) {
4
  return (
5
    <html lang="en">
6
      <body>
7
        <TooltipProvider>{children}</TooltipProvider>
8
      </body>
9
    </html>
10
  )
11
}

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/pxl/tooltip"

<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

Composition

Use the following composition to build a Tooltip:

Tooltip
├── TooltipTrigger
└── TooltipContent

Side

Use the side prop to change the position of the tooltip.

API Reference

See the Base UI Tooltip documentation.