<div class="container">
  <p class="icon">HOVER ME</p>
  <div class="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;
}

.container:hover .popup {
  opacity: 1;
  display: block;
}

.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;
  animation: in-animation 0.25s ease;
}

@keyframes in-animation {
  from { opacity: 0; }
  to   { opacity: 1; }
}