Tooltip

Tooltip that shows information on hover.

Basic Usage

Wrap the target element with Tooltip and set the content prop.

import { Tooltip, Button } from '@airo-ui/react'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Tooltip content="Top tooltip">
        <Button>Top</Button>
      </Tooltip>
      <Tooltip content="Bottom tooltip" placement="bottom">
        <Button>Bottom</Button>
      </Tooltip>
      <Tooltip content="Left tooltip" placement="left">
        <Button>Left</Button>
      </Tooltip>
      <Tooltip content="Right tooltip" placement="right">
        <Button>Right</Button>
      </Tooltip>
    </div>
  )
}

Disabled

<Tooltip content="Won't show" disabled>
  <Button variant="ghost">Disabled Tooltip</Button>
</Tooltip>

API

Props

Name	Type	Default	Description
content	string	''	Tooltip text
placement	'top' | 'bottom' | 'left' | 'right'	'top'	Display position
delay	number	100	Show/hide delay (ms)
disabled	boolean	false	Disable tooltip
children	React.ReactNode	Required	Target element triggering the tooltip

Interaction

• Delayed show on hover/focus, delayed hide on leave
• Four directional placement with auto-flip
• Arrow pointer pointing to trigger element
• 100ms debounce on enter/leave