Tooltip

Contextual hint. 4 placements × 2 themes.

tsx

import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

export default function Example() {
  return (
    <Tooltip content="Shows in the next 3 days">
      <Button variant="outline">Delivery</Button>
    </Tooltip>
  );
}

Installation

$ npx uix-ui@latest add tooltip

This copies the file into components/ui/tooltip.tsx in your project. npx shadcn@latest add @uix/tooltip works too.

Usage

tooltip.tsx

import { Tooltip } from "@/components/ui/tooltip";

<Tooltip content="Shows in the next 3 days">
  <Button variant="outline">Delivery</Button>
</Tooltip>

Examples

Placements

tsx

import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-6" style={{ padding: "36px 56px" }}>
      <Tooltip placement="top" content="Top"><Button variant="outline" size="sm">Top</Button></Tooltip>
      <Tooltip placement="bottom" content="Bottom"><Button variant="outline" size="sm">Bottom</Button></Tooltip>
      <Tooltip placement="left" content="Left"><Button variant="outline" size="sm">Left</Button></Tooltip>
      <Tooltip placement="right" content="Right"><Button variant="outline" size="sm">Right</Button></Tooltip>
    </div>
  );
}

Light theme on an icon button

tsx

import { IconButton } from "@/components/ui/icon-button";
import { Info } from "@/components/ui/icons";
import { Tooltip } from "@/components/ui/tooltip";

export default function Example() {
  return (
    <Tooltip theme="light" content="Copy the order number">
      <IconButton aria-label="Copy order number" variant="outline"><Info /></IconButton>
    </Tooltip>
  );
}

Props

Prop	Type	Default
`theme`	`dark \| light`	`"dark"`
`placement`	`top \| bottom \| left \| right`	`"top"`
`content`	`React.ReactNode`	–

Everything else is passed to the root element, so className, aria-* and event handlers work as usual.

Dependencies

Installed for you by the CLI.

class-variance-authority
clsx
tailwind-merge

lib/utils.ts

Getting started

Actions

Forms

Navigation

Feedback

Data display

Overlays

#Installation

#Usage

#Examples

#Placements

#Light theme on an icon button

#Props

#Dependencies