Tooltip

<Flex gap="4" align="center" justify="between" width="100%">
  <Tooltip content="Top tooltip (default)" side="top">
    <Button size="1">Top</Button>
  </Tooltip>
  <Tooltip content="Right tooltip" side="right">
    <Button size="1">Right</Button>
  </Tooltip>
  <Tooltip content="Bottom tooltip" side="bottom">
    <Button size="1">Bottom</Button>
  </Tooltip>
  <Tooltip content="Left tooltip" side="left">
    <Button size="1">Left</Button>
  </Tooltip>
</Flex>

<Flex gap="4" align="center">
  <Tooltip content="Start aligned tooltip" side="bottom" align="start">
    <Button size="1">Start</Button>
  </Tooltip>
  <Tooltip
    content="Center aligned tooltip (default)"
    side="bottom"
    align="center"
  >
    <Button size="1">Center</Button>
  </Tooltip>
  <Tooltip content="End aligned tooltip" side="bottom" align="end">
    <Button size="1">End</Button>
  </Tooltip>
</Flex>

<Flex gap="4" align="center">
  <Tooltip content="Default offset" side="top">
    <Button size="1">Default</Button>
  </Tooltip>
  <Tooltip content="Side offset: 15" side="top" sideOffset={15}>
    <Button size="1">Side offset</Button>
  </Tooltip>
  <Tooltip content="Align offset: -10" side="top" alignOffset={-10}>
    <Button size="1">Align offset</Button>
  </Tooltip>
  <Tooltip
    content="Both offsets combined"
    side="top"
    sideOffset={12}
    alignOffset={8}
  >
    <Button size="1">Combined</Button>
  </Tooltip>
</Flex>

<Flex gap="4">
  <Tooltip
    content="This feature allows you to synchronize your user directory with external identity providers like Active Directory, Google Workspace, or Okta."
    maxWidth="300px"
    align="center"
  >
    <InfoCircledIcon />
  </Tooltip>
</Flex>

<Flex gap="4">
  <Tooltip
    content="This is a short tooltip that will wrap at 150px max width."
    maxWidth="150px"
    align="center"
  >
    <Button>150px max</Button>
  </Tooltip>

  <Tooltip
    content="This tooltip has more content and demonstrates how text wraps at different widths. It provides a good balance between readability and space efficiency."
    maxWidth="220px"
    align="center"
  >
    <Button>220px max</Button>
  </Tooltip>

  <Tooltip
    content="This tooltip has even more detailed content and shows how longer explanations can be presented in a readable format when you need to provide comprehensive information about a feature or action."
    maxWidth="320px"
    align="center"
  >
    <Button>320px max</Button>
  </Tooltip>

  <Tooltip content="This tooltip demonstrates the default behavior without a maxWidth constraint and will expand to fit content up to the natural line breaking points.">
    <Button>No max</Button>
  </Tooltip>
</Flex>