<div id="mypopover" popover>

  <p>I'm a popover.</p>

  <p>Click anywere outside to close me.</p>

  <p>Or press <code>Esc</code></p>

</div>

​

<button popovertarget="mypopover">Click me to show the popover</button>

[popover] {

  background: #f8fafc;

  padding: 1em 2em;

  border-radius: 0.2em;

  font-size: 2rem;

}

​

[popover]::backdrop {

  background: #fff3;

  backdrop-filter: blur(4px);

}

​

html {

  background: #fb7185;

}

​

button {

  margin: auto;

  display: block;

  margin-top: 2em;

  font-size: 1.2rem;

  padding: 1em 2em;

  background: #0ea5e9;

  color: #020617;

  border: 2px solid #020617;

  border-radius: 0.2em;

}

​