<button popovertarget="my-tooltip">?</button>

<p id="my-tooltip" popover>tip</p>

@layer components.popover {
  [popover] {
    &, &::backdrop {
      transition: 
        display .5s allow-discrete, 
        overlay .5s allow-discrete, 
        opacity .5s ease,
        transform .5s ease;
      
      /* Exit Stage To */
      opacity: 0;
    }
    
    &::backdrop {
      background: black;
    }
    
    /* On Stage */
    &:popover-open {
      opacity: 1;
      
      &::backdrop {
        opacity: 0.5;
      }
    }
    
    /* Enter Stage From */
    @starting-style {
      &:popover-open,
      &:popover-open::backdrop {
        opacity: 0;
      }
      
      &:popover-open {
        transform: translateY(10px);
      }
    }
  }
}

@layer demo.support {
  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    margin: 0;
  }
}