Tooltip

Display a description for an element on hover or focus.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Tooltip example
import { Plus } from "@phosphor-icons/react/dist/ssr";
import { Button } from "@/shim-ui/button";
import { Tooltip, TooltipTrigger } from "@/shim-ui/tooltip";

export default () => (
  <TooltipTrigger closeDelay={50} delay={200}>
    <Button>
      <Plus size={16} />
    </Button>
    <Tooltip>Add new file</Tooltip>
  </TooltipTrigger>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add tooltip

Placement

Use the placement prop to control where the tooltip appears relative to its trigger.

Placement example
import {
  ArrowDown,
  ArrowLeft,
  ArrowRight,
  ArrowUp,
} from "@phosphor-icons/react/dist/ssr";
import { Button } from "@/shim-ui/button";
import { Tooltip, TooltipTrigger } from "@/shim-ui/tooltip";

export default () => (
  <>
    <TooltipTrigger>
      <Button>
        <ArrowUp size={16} />
      </Button>
      <Tooltip placement="top">Top</Tooltip>
    </TooltipTrigger>

    <TooltipTrigger>
      <Button>
        <ArrowRight size={16} />
      </Button>
      <Tooltip placement="right">Right</Tooltip>
    </TooltipTrigger>

    <TooltipTrigger>
      <Button>
        <ArrowLeft size={16} />
      </Button>
      <Tooltip placement="left">Left</Tooltip>
    </TooltipTrigger>

    <TooltipTrigger>
      <Button>
        <ArrowDown size={16} />
      </Button>
      <Tooltip placement="bottom">Bottom</Tooltip>
    </TooltipTrigger>
  </>
);