Overlays

Tooltip

A short hint on hover and keyboard focus.

import { Tooltip } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Basic

tooltip/basic.tsx

import { Button, Tooltip } from '@jsonresume/ui';

export default function TooltipBasic() {
  return (
    <>
      <Tooltip content="Copies a link to this resume">
        <Button>Share</Button>
      </Tooltip>
      <Tooltip content="Opens the PDF in a new tab" side="bottom">
        <Button variant="ghost">PDF</Button>
      </Tooltip>
    </>
  );
}

Usage

Do

Use for supplementary hints only.

Don’t

Put essential information or links in a tooltip.

Accessibility

Shows on focus as well as hover, and dismisses with Escape.

Props

Also accepts the attributes of the element Tooltip renders.
Prop	Type	Default	Description
content required	ReactNode	–	The tooltip text. Supplementary only: never put essential information here.
delayDuration	number	300
side	bottomleftrighttop	top