JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div style="top:20px;left:20px;" class="red-circle" data-content="This is a red circle"></div>
  <div style="top:10px;left:150px;" class="red-circle" data-content="This is the top-right red circle"></div>
  <div style="top:140px;left:150px;" class="red-circle" data-content="This is the bottom-right red circle"></div>
  <span style="display:hidden" id="pop-up"></span>
</div>

CSS

.container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}

.red-circle {
  border-radius: 50%;
  background: red;
  width: 20px;
  height: 20px;
  position: absolute;
}

#pop-up {
  background-color: #EFEFEF;
  padding: 0.25em;
  position: absolute;
}

JavaScript

const popup = document.getElementById("pop-up")

const parsePx = (px) => parseFloat(px.slice(0, -2))

const showPopup = (top, left, text) => {
	popup.textContent = text;
  popup.style.top = top + 20 + "px";
  popup.style.left = left + 20 + "px";
  popup.style.display = 'inline-block';
}

const hidePopup = () => {
	popup.style.display = 'none';
}

const circles = document.querySelectorAll(".red-circle")
circles.forEach(el => el.addEventListener('mouseover', (e) => {

	const hoveredEl = e.target;

	const textContent = hoveredEl.getAttribute('data-content');
  const { top, left } = getComputedStyle(hoveredEl);
  
  showPopup(parsePx(top), parsePx(left), textContent);
  
}))

circles.forEach(el => el.addEventListener('mouseout', (e) => { hidePopup() }))