<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.