JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="container">
  <img src="https://source.unsplash.com/random/800x600" alt="">
  <button style="top: 10%; left: 10%;" class="hotspot js-hotspot"></button>
  <button style="top: 80%; left: 50%;" class="hotspot js-hotspot"></button>
  <div class="popup">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe harum iste earum, labore tempora. Obcaecati fugiat enim repellat ullam nobis.</div>
</div>

CSS

.container {
  position: relative;
  display: inline-block;
}

.hotspot {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background-color: crimson;
  z-index: 2;
}

.popup {
  position: absolute;
  top: 20%;
  right: 20%;
  bottom: 20%;
  left: 20%;
  padding: 1rem;
  background-color: #ededed;
  border: 1px solid #cccccc;
  transition: all 200ms linear;
  transform: scale(0.8);
  opacity: 0;
  visibility: hidden;
}

.popup--is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

JavaScript

document.querySelector('.js-hotspot').addEventListener('click', function() {
	document.querySelector('.popup').classList.toggle('popup--is-visible')
})