<section>
  <button popovertarget="popover">Toggle the popover</button>
  <div id="popover" popover>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur
      faucibus dolor, ut molestie ante posuere sit amet. Quisque lacus mi,
      imperdiet eu dui non, vulputate porta ligula. Cras nulla leo, volutpat sit
      amet sodales sed, egestas eget purus.
    </p>
  </div>
</section>

<style>
  section {
    padding: 4px;
  }

  [popover] {
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-inline;
    margin-block: 4px;
    max-width: 25em;

    border-radius: 6px;
    padding: 12px;
    border: 1px solid transparent;
    box-shadow:
      0 0 0 1px #00000014,
      0px 1px 1px #00000005,
      0px 8px 16px -4px #0000000a,
      0px 24px 32px -8px #0000000f,
      0 0 0 1px hsla(0, 0%, 98%, 1);

    transition: all 150ms ease-in-out;
    transition-behavior: allow-discrete;
    transform-origin: top left;

    transform: scale(0.98);
    opacity: 0;
  }

  [popover]:popover-open {
    transform: none;
    opacity: 1;

    @starting-style {
      transform: scale(0.98);
      opacity: 0;
    }
  }
</style>