How to add a popup description Box using onmouseover with JavaScript?

Sometimes, we want to add a popup description Box using onmouseover with JavaScript.

In this article, we’ll look at how to add a popup description Box using onmouseover with JavaScript.

How to add a popup description Box using onmouseover with JavaScript?

To add a popup description Box using onmouseover with JavaScript, we can set the display CSS property of the popup in the onmouseover method of its parent element.

For instance, we write:

<div id="parent">
  <div id="popup" style="display: none">description text here</div>
</div>

to add the parent with the popup div inside.

Then we write:

#parent {
  width: 200px;
  height: 200px
}

#parent #popup {
  display: none;
}

#parent:hover #popup {
  display: block;
}

to add some styles to the divs.

We hide the popup div by default.

Next, we write:

const e = document.getElementById('parent');
e.onmouseover = () => {
  document.getElementById('popup').style.display = 'block';
}
e.onmouseout = () => {
  document.getElementById('popup').style.display = 'none';
}

to select the parent div with document.getElementById.

Then we set e.onmouseover to a function that sets the display CSS property of the popup div to 'block'.

Likewise, we set e.onmouseout to a function that sets the display CSS property of the popup div to 'none'.

Conclusion

To add a popup description Box using onmouseover with JavaScript, we can set the display CSS property of the popup in the onmouseover method of its parent element.