Skip to content

Tooltip

A short label shown on hover or keyboard focus.

import { Button, Tooltip } from '@brand-studio/ui';

export default function TooltipDemo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      <Tooltip content="Saved to your library">
        <Button tone="secondary">Hover or focus me</Button>
      </Tooltip>
      <Tooltip content="Opens in a new tab" side="bottom">
        <Button tone="secondary">Below</Button>
      </Tooltip>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Tooltip } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Tooltip } from '@brand-studio/ui';

<Tooltip content="Saved to your library">
  <Button tone="secondary">Save</Button>
</Tooltip>

Accessibility

Opens on hover after a short delay and on keyboard focus. Escape closes it.
The child must be focusable, such as a button. Do not put information only in a tooltip; touch screens cannot hover.

API Reference

Prop	Type	Default
`content`	`React.ReactNode`	–
`children`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	–
`side?`	`"bottom" \| "left" \| "right" \| "top"`	`'top'`
`delay?`	`number`	`300`