<div id="container">
  <p class="icon">HOVER ME</p>
  <div id="popup">
    <p>Popup which contains some crazy cool information!</p>
  </div>
</div>

<p>Some content below the icon.</p>
<button onclick="alert('hello')">Click me</button>

#container {
  position: relative;
}

.icon {
  background-color: rgba(200,200,200);
  padding: 2px 5px;
  width: fit-content;
}

#popup {
  max-width: 100px;
  background-color: rgba(180,180,200);
  padding: 1px 20px;
  position: absolute;
  top: 20px;
  transition: all 0.25s ease;
  opacity: 0;
  display: none;
}

const popup = document.getElementById('popup');
const container = document.getElementById('container');

container.onmouseenter = () => {
  popup.style.display = 'block';
  setTimeout(() => popup.style.opacity = 1, 100);
}

container.onmouseleave = () => {
  popup.style.opacity = 0;
  setTimeout(() => popup.style.display = 'none', 250);
}