YobWerd YobWerd - 1 year ago 101
C# Question

Pop-Up Info Window on Mouse Over

I would like to implement a pop-up window on mouse over to display a basic thumbnail displaying all the info about said entry.

Below is my index view:

Index View

Below is the thumbnail window I would like to display when the mouse hovers over any of the Software Name's.


Any help is appreciate, thank you in advance!

Answer Source

Assuming popup is the ID of your "description box":


<div id="parent">
This is the main container.
<div id="popup" style="display: none">some text here</div>


var e = document.getElementById('parent');
e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';

Alternatively you can get rid of JavaScript entirely and do it just with CSS:


.parent .popup {
  display: none;

.parent:hover .popup {
  display: block;