Displaying pop-up summaries on hover in visualforce 

What if I want to make a summary pop-up window when a user hovers over a link in a visualforce page. This Feature is easy in standard salesforce pages, mostly because it happens automatically. But not in visualforce pages. I have seen most of example for pop-up in salesforce were created using the output panels with some embedded styles. 


Here I'm posting a pop-up example which show the details of a partuclar record on a mouseover using the Hover links similar to those used in standard Salesforce links. 

/*Visualforce page*/

<apex:page controller="PopupTest">  
<apex:form >  
    <apex:repeat value="{!accounts}" var="acc">                              
            
  <a href="/{!acc.Id}" id="{!acc.Id}" onblur="LookupHoverDetail.getHover('{!acc.Id}').hide();" onfocus="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();" onmouseout="LookupHoverDetail.getHover('{!acc.Id}').hide();" onmouseover="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();">{!acc.Name}</a>  
    </apex:repeat>  
</apex:form>  
</apex:page>  

 /*Controller*/

public with sharing class PopupTest {    
    public List<account> getAccounts()  
    {  
        List<account> accounttList = new List<account>();  
        accounttList = [Select Id, Name from Account LIMIT 10];  
        return accounttList ;  
    }  
  
}