JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<script src="https://unpkg.com/popper.js"></script>
<a class="button" href="#">Toggle popup</a>

<div class="popper">
  <div x-arrow></div>
  <ul>
    <li>lorem</li>
    <li>ipsum</li>
  </ul>
  
</div>

CSS

.popper {
  border: solid 1px red;
  position: relative;
  height: 200px;
  width: 300px;
}

.hidden {
  display: none;
}

.button {
  display: inline-block;
  padding: 20px;
  border: solid 1px green;
}

[x-arrow] {
  background: red;
  height: 10px;
  width: 10px;
  top: -10px;
  position: absolute;
}

body {
  padding: 100px;
}

JavaScript

var reference = document.querySelector('.button');
var popper = document.querySelector('.popper');
var anotherPopper = new Popper(reference, popper, {
		placement: 'bottom',
    //eventsEnabled: false,
    modifiers: {
      offset: {
      	offset: "0px, 10px"
      }
    }
	}
)

var li = popper.querySelector("li")

li.addEventListener("click", function(){
	console.log(this)
})

reference.addEventListener("click", function(event){
	event.preventDefault()
	popper.classList.toggle("hidden")
})