Overlays

Tooltip

A short label that appears on hover and on keyboard focus, linked to its element with aria-describedby. Escape hides it. Never put interactive content or essential information only in a tooltip.

demos/tooltip.tsx

import { IconButton } from "pixelbits/icon-button";
import { Tooltip } from "pixelbits/tooltip";

export default function Demo() {
  return (
    <Tooltip content="Copy to clipboard">
      <IconButton aria-label="Copy">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          aria-hidden="true"
        >
          <path d="M8 8h12v12H8zM16 8V4H4v12h4" />
        </svg>
      </IconButton>
    </Tooltip>
  );
}

Installation

npm: import

import { Tooltip } from "pixelbits/tooltip";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/tooltip.json

API

<Tooltip>

A short label that appears on hover and on keyboard focus, linked to its element with aria-describedby. Escape hides it. Never put interactive content or essential information only in a tooltip.

Example

<Tooltip content="Copy to clipboard">
  <IconButton aria-label="Copy"><CopyIcon /></IconButton>
</Tooltip>

Prop	Type	Default	Description
content*	ReactNode	—	The text (keep it short, plain text works best).
children*	ReactElement	—	The element it describes: must be focusable (a button, a link).
delay	number	400	Delay before showing on hover, in ms. Keyboard focus shows it at once.
align	"start" \| "center" \| "end"	"center"	Horizontal alignment with the element.
className	string	—	Extra classes for the tooltip bubble.