export default function Example() { const triggerCss = { border: "none", color: "$gray80", padding: 0, backgroundColor: "transparent", fontWeight: "normal", textDecoration: "underline", "&:hover": { backgroundColor: "transparent", }, }; return ( <Popover.Root defaultOpen={true}> <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger> <Popover.Portal> <Popover.Content> Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "} <Tooltip.Provider> <Tooltip.Root> <Tooltip.Trigger> <u>Hover over me</u> </Tooltip.Trigger> <Tooltip.Content> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </Tooltip.Content> </Tooltip.Root> </Tooltip.Provider> non eget consequat pretium. </Popover.Content> </Popover.Portal> </Popover.Root> ); }