export default function Example() {
  return (
    <Box>
      <Tooltip.Provider>
        <Tooltip.Root defaultOpen={true}>
          <Tooltip.Trigger>
            <Box>
              <Tooltip.Provider>
                <Tooltip.Root defaultOpen={true}>
                  <Tooltip.Trigger>
                    <Box
                      css={{
                        textDecoration: "underline",
                        fontWeight: theme.fontWeights.light,
                        fontSize: theme.fontSizes[100],
                        color: theme.colors.accessible,
                      }}
                    >
                      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",
                        }}
                      >
                        Trigger 2
                      </Box>
                      <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                        (swap with local component)
                      </Box>
                    </Box>
                  </Tooltip.Content>
                </Tooltip.Root>
              </Tooltip.Provider>
            </Box>
          </Tooltip.Trigger>
          <Tooltip.Content side="left" align="start" offsetAlign="31.25rem">
            <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",
                }}
              >
                Slot
              </Box>
              <Box css={{ fontSize: "8px", fontWeight: "$light" }}>
                (swap with local component)
              </Box>
            </Box>
          </Tooltip.Content>
        </Tooltip.Root>
      </Tooltip.Provider>
    </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