Tooltip

import { Tooltip } from '@raystack/apsara';

<Tooltip>
  <Tooltip.Trigger render={<button>Hover me</button>} />
  <Tooltip.Content>Helpful information</Tooltip.Content>
</Tooltip>

<Tooltip>
  <Tooltip.Trigger render={<button>Hover me</button>} />
  <Tooltip.Content showArrow>This tooltip has an arrow</Tooltip.Content>
</Tooltip>

<Tooltip>
  <Tooltip.Trigger render={<button>Hover me</button>} />
  <Tooltip.Content side="bottom" align="start">
    Positioned at bottom-start
  </Tooltip.Content>
</Tooltip>

<Tooltip.Provider delay={500}>
  <Tooltip>
    <Tooltip.Trigger render={<button>First</button>} />
    <Tooltip.Content>First tooltip</Tooltip.Content>
  </Tooltip>
  
  <Tooltip>
    <Tooltip.Trigger render={<button>Second</button>} />
    <Tooltip.Content>Second tooltip</Tooltip.Content>
  </Tooltip>
</Tooltip.Provider>

<Tooltip delay={1000}>
  <Tooltip.Trigger render={<button>Slow to appear</button>} />
  <Tooltip.Content>This tooltip has a 1 second delay</Tooltip.Content>
</Tooltip>

const [open, setOpen] = useState(false);

<Tooltip open={open} onOpenChange={setOpen}>
  <Tooltip.Trigger render={<button>Controlled</button>} />
  <Tooltip.Content>Controlled tooltip content</Tooltip.Content>
</Tooltip>