Thrive Design System

Components

Tooltip

A small informational popup that appears on hover or focus to provide additional context about an element.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { Tooltip } from '@thrivecart/ui';

Examples

Basic Tooltip

Default

Tooltip on a button

<Tooltip content="Save your changes">
<Button variant="secondary">Save</Button>
</Tooltip>

Icon Button with Tooltip

Icon Tooltip

Tooltip providing context for an icon button

<Tooltip content="Settings">
<IconButton variant="ghost" aria-label="Settings">
  <MdSettings />
</IconButton>
</Tooltip>

Positioning

Tooltip Sides

Tooltips can appear on any side

<div className="flex items-center gap-4">
<Tooltip content="Top tooltip" side="top"><Button variant="ghost" size="sm">Top</Button></Tooltip>
<Tooltip content="Right tooltip" side="right"><Button variant="ghost" size="sm">Right</Button></Tooltip>
<Tooltip content="Bottom tooltip" side="bottom"><Button variant="ghost" size="sm">Bottom</Button></Tooltip>
<Tooltip content="Left tooltip" side="left"><Button variant="ghost" size="sm">Left</Button></Tooltip>
</div>

Best Practices

✓

Keep text short

Tooltip content should be 1-2 short sentences maximum.

✓

Use for icon buttons

Every icon-only button should have a tooltip explaining its action.

✗

Don't put essential info in tooltips

If users must see the information, display it inline.

✗

Don't add tooltips to obvious elements

A button labeled "Delete" doesn't need a tooltip saying "Delete this item."

Props

Props

Accessibility

  • Appears on focus for keyboard users, not just hover.
  • Uses role="tooltip" and aria-describedby linking.
  • Can be disabled for screen readers when content is redundant.
  • Respects prefers-reduced-motion for animations.