Tooltip

<Arrange gap="medium" columns="repeat(3, 1fr)">
  {[
    'topLeft',
    'topCenter',
    'topRight',
    'bottomLeft',
    'bottomCenter',
    'bottomRight',
    'leftTop',
    'leftCenter',
    'leftBottom',
    'rightTop',
    'rightCenter',
    'rightBottom',
  ].map((placement, index) => (
    <Tooltip content="I'm here" placement={placement} key={index}>
      <Container backgroundColor="overlay" borderSide="all" padding="medium">
        <Text alignment="center">{placement}</Text>
      </Container>
    </Tooltip>
  ))}
</Arrange>

<Tooltip maxWidth={40} content={demoText.medium}>
  <div>trigger</div>
</Tooltip>

<Arrange gap="large">
  <Tooltip content='4px' triggerOffset={4}>
    <div>Offset from trigger 4px</div>
  </Tooltip>
  <Tooltip content='32px' triggerOffset={32}>
    <div>Offset from trigger 32px</div>
  </Tooltip>
</Arrange>

<Tooltip keepOpen content='Hover me and I will stay open'>
  <div>Keep my tooltip open</div>
</Tooltip>

<>
  <Tooltip isInline content='Content'>
    <Container borderSide="all" borderColor="red">Wrap children with display: inline-block</Container>
  </Tooltip>
  <Tooltip isInline={false} content='Content'>
    <Container borderSide="all" borderColor="red">Wrap children with display: block</Container>
  </Tooltip>
</>

<TooltipBox maxWidth={30}>
  TooltipBox content
</TooltipBox>

<>
  <Tooltip content='Delete'>
    <IconButton icon={<SvgTrash />} altText="Trash"/>
  </Tooltip>
  <Tooltip content='Add'>
    <IconButton icon={<SvgAdd />} altText="Add"/>
  </Tooltip>
  <Tooltip content='Close'>
    <IconButton icon={<SvgClose />} altText="Close"/>
  </Tooltip>
</>