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