彈出信息窗口在鼠標懸停時

Question

我想在落實鼠標彈出窗口中顯示縮略圖基本顯示有關的所有信息表示條目。

下面是我的索引視圖：

下面是縮略圖窗口，我想，當鼠標懸停在任何的軟件名稱的顯示。

任何幫助表示讚賞，感謝你在前進！

Answer 1

假設彈出是你的 「說明框」 的ID：

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

另外，您可以完全刪除的JavaScript和這樣做只是與CSS：

CSS

.parent .popup { 
    display: none; 
} 

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

Answer 2

你可以做的是通過所有的<tr> </tr>使用jQuery遍歷和附加在其中添加您的縮略圖一個html元素。喜歡的東西：

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

正如你可以看到我申請一些CSS到div apended爲了顯示它附近的鼠標位置。