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