Tooltip

Stable

Contextual information on hover with multiple positioning options.

Import

import { Tooltip } from '@brutal-ui/react';

Positions

<Tooltip content='This appears on top' position='top'>
  <Button>Top</Button>
</Tooltip>

<Tooltip content='This appears on the right' position='right'>
  <Button>Right</Button>
</Tooltip>

<Tooltip content='This appears on bottom' position='bottom'>
  <Button>Bottom</Button>
</Tooltip>

<Tooltip content='This appears on the left' position='left'>
  <Button>Left</Button>
</Tooltip>

With Delay

<Tooltip content='Instant tooltip' delay={0}>
  <Button>No Delay</Button>
</Tooltip>

<Tooltip content='500ms delay' delay={500}>
  <Button>500ms Delay</Button>
</Tooltip>

Use Cases

Action with keyboard shortcut

Beta

Status explanation

John Doe

Additional information

Props

Prop	Type	Default	Description
content	string	-	Tooltip text
position	string	"top"	top \| bottom \| left \| right
delay	number	200	Delay before showing (ms)