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

<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; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.