Feedback

Tooltip

Small ink label on hover and focus, with an optional keyboard shortcut.

• Wrap one focusable trigger; provide label and optional shortcut and side.
• Tooltips name things; they never hold instructions or links.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface TooltipProps {
  label: string;
  shortcut?: string;
  side?: 'top' | 'bottom' | 'right';
  children: ReactNode
}

Use

import { Tooltip } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Tooltip/README.md