Shim

Tooltip

Display a description for an element on hover or focus.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Install
pnpm dlx @kkga/shim add tooltip
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.

import {
  ArrowDownIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  ArrowUpIcon,
} from "@phosphor-icons/react/dist/ssr";
import { Button } from "@/shim-ui/button";
import { Tooltip, TooltipTrigger } from "@/shim-ui/tooltip";

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

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

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

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

Size

Use the size prop to set the size of the tooltip.

import { Button } from "@/shim-ui/button";
import { Tooltip, TooltipTrigger } from "@/shim-ui/tooltip";

export default () =>
  ([1, 2, 3, 4] as const).map((size) => (
    <TooltipTrigger key={size}>
      <Button>Size {size}</Button>
      <Tooltip size={size}>This is a tooltip with size {size}.</Tooltip>
    </TooltipTrigger>
  ));