Anex UI logoAnex UI
npm install anexui
Documentation

Documentation

Tooltip

A pure-CSS tooltip that appears on hover and focus. Uses role="tooltip" and aria-describedby.

Preview

Saves your progressPermanently removes the itemCopy to clipboardOpens in a new tab

Usage

import { Tooltip } from "anexui";

<Tooltip content="Save your changes">
  <Button>Save</Button>
</Tooltip>
Copy code

Sides

<Tooltip content="Above" side="top"><Button>Top</Button></Tooltip>
<Tooltip content="Below" side="bottom"><Button>Bottom</Button></Tooltip>
<Tooltip content="Left side" side="left"><Button>Left</Button></Tooltip>
<Tooltip content="Right side" side="right"><Button>Right</Button></Tooltip>
Copy code

Rich content

<Tooltip content={<span>Keyboard shortcut: <kbd>⌘S</kbd></span>}>
  <Button>Save</Button>
</Tooltip>
Copy code

Props

| Prop | Type | Default | Description | |---|---|---|---| | content | ReactNode | — | Required. Tooltip text or JSX | | side | "top" \| "bottom" \| "left" \| "right" | "top" | Preferred placement | | children | ReactNode | — | Required. The trigger element |

Accessibility