export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$350",
        height: "300px",
      }}
    >
      <Box>
        <Tooltip.Provider>
          <Tooltip.Root defaultOpen={true}>
            <Tooltip.Trigger>
              <Box
                css={{
                  height: "100px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                Trigger
              </Box>
            </Tooltip.Trigger>
            <Tooltip.Content side="left" align="start" offsetAlign="5.8rem">
              <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",
                  }}
                >
                  Left-Start
                </Box>
                <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                  (swap with local component)
                </Box>
              </Box>
            </Tooltip.Content>
            <Tooltip.Content side="left">
              <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",
                  }}
                >
                  Left-Center
                </Box>
                <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                  (swap with local component)
                </Box>
              </Box>
            </Tooltip.Content>
            <Tooltip.Content side="left" align="end" offsetAlign="5.8rem">
              <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",
                  }}
                >
                  Left-End
                </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
                css={{
                  height: "70px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                Trigger
              </Box>
            </Tooltip.Trigger>
            <Tooltip.Content side="top" align="end" sideOffset={"0rem"}>
              <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",
                  }}
                >
                  Top-End
                </Box>
                <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                  (swap with local component)
                </Box>
              </Box>
            </Tooltip.Content>
            <Tooltip.Content side="bottom" align="end" sideOffset={"0rem"}>
              <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-End
                </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
                css={{
                  height: "70px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                Trigger
              </Box>
            </Tooltip.Trigger>
            <Tooltip.Content side="top" sideOffset={"0rem"}>
              <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",
                  }}
                >
                  Top-Center
                </Box>
                <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                  (swap with local component)
                </Box>
              </Box>
            </Tooltip.Content>
            <Tooltip.Content side="bottom" sideOffset={"0rem"}>
              <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
                css={{
                  height: "70px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                Trigger
              </Box>
            </Tooltip.Trigger>
            <Tooltip.Content side="top" align="start" sideOffset={"0rem"}>
              <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",
                  }}
                >
                  Top-Start
                </Box>
                <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                  (swap with local component)
                </Box>
              </Box>
            </Tooltip.Content>
            <Tooltip.Content side="bottom" align="start" sideOffset={"0rem"}>
              <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-Start
                </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
                css={{
                  height: "100px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                Trigger
              </Box>
            </Tooltip.Trigger>
            <Tooltip.Content side="right" align="start" offsetAlign="5.8rem">
              <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",
                  }}
                >
                  Right-Start
                </Box>
                <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                  (swap with local component)
                </Box>
              </Box>
            </Tooltip.Content>
            <Tooltip.Content side="right">
              <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",
                  }}
                >
                  Right-Center
                </Box>
                <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                  (swap with local component)
                </Box>
              </Box>
            </Tooltip.Content>
            <Tooltip.Content side="right" align="end" offsetAlign="5.8rem">
              <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",
                  }}
                >
                  Right-End
                </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