JSFiddle - React, Tailwind, and code Playground

by Jesper Brinch Korsbakke

HTML

<div class="popover-wrapper">
  <button id="button">Click me</button>
  <div id="popover" class="popover">
    I am a popover
  </div>
</div>

SCSS

.popover-wrapper {
  position: relative;


  .popover {
    display: none;
    background-color: #eeeeee;
    max-width: 300px;
    padding: 9px 15px;
    position: absolute;
    top: 30px;
    
    &.open {
      display: block;
    }
  }
}

JavaScript

(function() {
	let button = document.getElementById("button")
  let popover = document.getElementById("popover")
  
  button.addEventListener("click", function(e) {
  	popover.classList.add("open")
  })
})();