<Tooltip content="Tooltip content">
  <Button>Default tooltip</Button>
</Tooltip>

<div class="flex gap-2">
  <Tooltip content="Tooltip content" style="light">
    <Button>Light tooltip</Button>
  </Tooltip>
  <Tooltip content="Tooltip content" style="dark">
    <Button>Dark tooltip</Button>
  </Tooltip>
</div>

<div class="flex gap-2">
  <Tooltip content="Tooltip content" placement="top">
    <Button>Tooltip top</Button>
  </Tooltip>
  <Tooltip content="Tooltip content" placement="right">
    <Button>Tooltip right</Button>
  </Tooltip>
  <Tooltip content="Tooltip content" placement="bottom">
    <Button>Tooltip bottom</Button>
  </Tooltip>
  <Tooltip content="Tooltip content" placement="left">
    <Button>Tooltip left</Button>
  </Tooltip>
</div>

<div class="flex gap-2">
  <Tooltip content="Tooltip content" trigger="hover">
    <Button>Tooltip hover</Button>
  </Tooltip>
  <Tooltip content="Tooltip content" trigger="click">
    <Button>Tooltip click</Button>
  </Tooltip>
</div>

<Tooltip content="Tooltip content" arrow={false}>
  <Button>Default tooltip</Button>
</Tooltip>