JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<div id="container">
test

<div popovertarget="mypopover">
  <button>Toggle the popover</button>
</div>

  <div id="mypopover" popover>
    <p>
      Popover content
    </p>
    <hr>
    <button>
      test
    </button>

  </div>
</div>

CSS

[popover]{
  transition-behavior: allow-discrete;

  
  
    top: 10px;
    left: 10px;
    bottom: unset;
    right: unset;
  
  &::backdrop { background: red; }  

  &:popover-open {
    background: blue;

  }
}

#container {
  height: 50px;
  width: 50px;
  overflow: hidden;
}

JavaScript

//document.querySelector('[popover] > button').addEventListener('click', console.warn);

//document.querySelector('[popover]').addEventListener('click', console.log);

document.querySelector('[popover]').addEventListener('beforetoggle', e => {

	console.log('e', e.target.tagName, e.target.id,  e.target.parent.getBoundingClientRect());

});


document.querySelector('[popovertarget="mypopover"]').addEventListener('click', e => {

	console.log('click', e.target.tagName, e.target.id,  e.target.getBoundingClientRect());

});