<apex:page controller="OnHover" sidebar="false">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <div id="hoverDiv" style ="display:none;border:4; position:absolute;height:auto;overflow: hidden;width:40%;left:40px; top:30px; background: #FDEEF4;">                       
        <table id="dataTable"  bordercolor="#E3DCDB" width="100%" border="2" align="center" rules="all" />
    </div>
    <apex:form >
	    <apex:pageBlock >
		    <apex:repeat value="{!accList}" var="acc">
			  <div class="ev~{!acc.id}" style="position:relative;left:20px;height:20px;width:180px;border-style:solid;border-color:#f2f2f2;" >
					{!acc.Name}
			  </div>
		    </apex:repeat>
	   </apex:pageBlock>
    </apex:form>
     <script type="text/javascript" language="JavaScript">
		var divId,splitId,top;
		$(document).ready(function(){
			$("div[class^=ev]").hover(
                function(e){ 
                    $("#hoverDiv").css('top', e.pageY - 90)
					$("#hoverDiv").css('left', e.pageX - 100)
					divId = $(this).attr("class");
					splitId= divId.split('~');
					showTable(splitId[1]); 
					$("div[id=hoverDiv]").show();
                             
				},
				function(){                           
					$("div[id=hoverDiv]").hide();
				}
			);                    
		}); 
        function showTable(recId){
			var result  = [];
			var event = [];
			var queryResult = [];
			OnHover.getRelatedContact(recId,function(result, event){ 
				var queryResult = result;                           
				var table = document.getElementById("dataTable"); 
				if(table.rows.length > 0){
					for(var p = table.rows.length - 1; p > -1; p--){
						table.deleteRow(p);
					}    
					tableDetails(queryResult);
				}else{  
					tableDetails(queryResult);
				}   
			}, 
			{escape:true}
			); 
		}
	   function tableDetails(qResult){
            var table = document.getElementById("dataTable"); 
                table.insertRow(0);    
                    for(j=0;j<3;j++)                  
                        table.rows[0].insertCell(j);
                    table.rows[0].className ="border";
                    table.rows[0].cells[0].innerHTML="<font size='1px' >FirstName</font>"; 
                    table.rows[0].cells[1].innerHTML="<font size='1px'>LastName</font>";                    
                    table.rows[0].cells[2].innerHTML="<font size='1px'>Email</font>";      
                    for (var i = 0; i < qResult.length; i++) {
                    table.insertRow(1);
                    for(j=0;j<3;j++)                  
                        table.rows[1].insertCell(j);                    
                    table.rows[1].className ="data";
                    table.rows[1].cells[0].innerHTML=qResult[i].FirstName;        
                    table.rows[1].cells[1].innerHTML=qResult[i].LastName;   
                    table.rows[1].cells[2].innerHTML=qResult[i].Email;   
                   }
                }
	</script> 
</apex:page>

/////////////////////

public class OnHover {
   public List<Account> acclist{get;set;}
   public OnHover(){
      acclist=new List<account>();
      accList=[SELECT id,Name FROM Account LIMIT 5];
   }
   @RemoteAction
    public static list<contact> getRelatedContact(String seId) {
        List<contact> remoteRsDisplayList = new List<contact>();
         remoteRsDisplayList = [Select Id,FirstName,LastName,Email FROM Contact WHERE AccountId =: seId];
            return remoteRsDisplayList;  
    } 
}