YobWerd YobWerd - 4 months ago 14
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.

Thumbnail

Any help is appreciate, thank you in advance!

Answer

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

HTML

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

JavaScript

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:

CSS

.parent .popup {
  display: none;
}

.parent:hover .popup {
  display: block;
}
Comments