export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "125px",
      }}
    >
      <Box>
        <Tooltip.Provider>
          <Tooltip.Root defaultOpen={true}>
            <Tooltip.Trigger>
              <Box>Trigger</Box>
            </Tooltip.Trigger>
            <Tooltip.Content side="bottom">
              <Box
                css={{
                  height: "48px",
                  backgroundColor: theme.colors.gray500,
                  alignSelf: "stretch",
                  flexGrow: 1,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  alignItems: "center",
                  padding: 0,
                }}
              >
                <Box
                  css={{
                    fontSize: "$075",
                    fontWeight: "$bold",
                    color: "$primary",
                  }}
                >
                  Bottom-Center
                </Box>
                <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                  (swap with local component)
                </Box>
              </Box>
            </Tooltip.Content>
          </Tooltip.Root>
        </Tooltip.Provider>
      </Box>
      <Box>
        <Tooltip.Provider>
          <Tooltip.Root defaultOpen={true}>
            <Tooltip.Trigger>
              <Box>Trigger</Box>
            </Tooltip.Trigger>
            <Tooltip.Content side="bottom" density="compact">
              <Box
                css={{
                  height: "48px",
                  backgroundColor: theme.colors.gray500,
                  alignSelf: "stretch",
                  flexGrow: 1,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  alignItems: "center",
                  padding: 0,
                }}
              >
                <Box
                  css={{
                    fontSize: "$075",
                    fontWeight: "$bold",
                    color: "$primary",
                  }}
                >
                  Bottom-Center
                </Box>
                <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                  (swap with local component)
                </Box>
              </Box>
            </Tooltip.Content>
          </Tooltip.Root>
        </Tooltip.Provider>
      </Box>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape