How to display hover details in visualforce Page(Pop Over Page)

Solution : Use the below syntax to display hover popover page
<a href="/{!acc.Id}"
id="{!acc.Id}"
position="relative"
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>
where acc.id will be the id of the object

Example :
Apex Class :
public class HoverDetailController {
    public List<Lead> leadList {get;set;}
    public HoverDetailController () {
        leadList =[select id,name,LeadSource,Status from Lead limit 5];
    }
}
Visualforce Page:
<apex:page controller="HoverDetailController">
    <apex:pageBlock title="Lead Records With Hover Page on hover">
        <apex:pageBlockTable value="{!leadList}" var="lead">
            <apex:column ><a href="/{!lead.Id}" id="{!lead.Id}" position="relative"
                onblur="LookupHoverDetail.getHover('{!lead.Id}').hide();"
                onfocus="LookupHoverDetail.getHover('{!lead.Id}', '/{!lead.Id}/m?retURL=%2F{!lead.Id}&isAjaxRequest=1').show();"
                onmouseout="LookupHoverDetail.getHover('{!lead.Id}').hide();"
                onmouseover="LookupHoverDetail.getHover('{!lead.Id}', '/{!lead.Id}/m?retURL=%2F{!lead.Id}&isAjaxRequest=1').show();">
                {!lead.name}
                </a>
            </apex:column>
            <apex:column value="{!lead.LeadSource}"/>
            <apex:column value="{!lead.Status}"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>
Output :

Important Note : If we want to add/remove some fields from popover page,you can do that in mini page layout.