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> ); }