Pop-Up Info Window on Mouse Over

Question

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:

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 1

What you could do is iterate through all the <tr> </tr> with JQuery and append a html element in which you add your thumbnail. Something like:

 $('#table tr').each(function (i, obj) {
        $(obj).mouseenter(function () {
            $('body').append("<div id='hoveringTooltip' style='position:fixed;'></div>");
            $('#hoveringTooltip').html("your thumbnail");
            $('#hoveringTooltip').css({
                "top": (obj.getBoundingClientRect().top + 20),
                "left": obj.getBoundingClientRect().left,
                "background-color": "white",
                "border": "1px solid black"
            });
        });
        $(obj).mouseleave(function () {
            $('#hoveringTooltip').remove();
        });
    })

As you can see I apply some css to the div apended in order to show it near the mouse location.

Answer 2

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