Displaying pop-up summaries on hover in visualforce

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*/

view plaincopy to clipboardprint?

1. <apex:page controller="PopupTest">  
2. <apex:form >  
3.     <apex:repeat value="{!accounts}" var="acc">                              
4.             
5.   <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>  
6.     </apex:repeat>  
7. </apex:form>  
8. </apex:page>  

/*Controller*/

view plaincopy to clipboardprint?

1. public with sharing class PopupTest {    
2.     public List<account> getAccounts()  
3.     {  
4.         List<account> accounttList = new List<account>();  
5.         accounttList = [Select Id, Name from Account LIMIT 10];  
6.         return accounttList ;  
7.     }  
8.   
9. }  
10. </account></account></account>  

Declaration: Directly depending on standard javascript libraries, query params, dom ID values or services (excluding the web services API, of course) is at your own risk. None of which are considered to be supported "APIs" and can change with any major or minor (patch) release without notice. Therefore promote this idea on ideaExchange in salesforce.