Pop-Up Info Fenster auf Maus über

Question

Ich möchte ein Popup-Fenster mit der Maus implementieren, um ein einfaches Miniaturbild anzuzeigen, das alle Informationen über diesen Eintrag anzeigt.

Unten ist mein Indexansicht:

unten ist das Miniaturfenster Ich mag würde angezeigt werden, wenn die Maus über einen der Software-Name des schwebt.

Jede Hilfe ist zu schätzen, danke im Voraus!

Answer 1

Angenommen Popup ist die ID Ihres "Beschreibungsfeld":

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

Alternativ können Sie JavaScript ganz loswerden und mach es nur mit CSS:

CSS

.parent .popup { 
    display: none; 
} 

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

Answer 2

Was Sie tun könnten ist, durchlaufen Sie alle <tr> </tr> mit JQuery und fügen Sie ein HTML-Element, in dem Sie Ihre Miniatur hinzufügen. Etwas wie:

$('#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(); 
     }); 
    }) 

Wie Sie sehen können, wenden ich ein css auf das div an, um es in der Nähe der Mausposition zu zeigen.