Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Tooltip

Brief contextual help attached to an independently labelled control.

CoreBasics@gaudi/design-system/core/TooltipView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Tooltip from '@gaudi/design-system/core/Tooltip';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/tooltip-disabled-button.json.

Usage

import Tooltip from '@gaudi/design-system/core/Tooltip';import Button from '@gaudi/design-system/core/Button';
<Tooltip content='Copy link'><Button aria-label='Copy link' onClick={copyLink}>Copy</Button></Tooltip>

Examples

Disabled button

Storybook

People

Storybook

Sides

Storybook

Status and metadata

Storybook

API

5 props

Accessibility

Tooltips open on focus and hover, dismiss with Escape and do not replace the control’s accessible name. Use Popover for interactive content.

PopoverPopover renders compact positioned supporting content next to its trigger.8 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesPillPill renders compact category and status labels.4 examples