function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ralph SrRalph Sr 

Visual Force page hover of a mini page layout

I am trying to get a base working example of a Visual Force page that displays a hover detail of a mini page loayout.

1) confirmed in Customize > User Interface that "Enable Hover details" is enabled.  Mini page layout hovers are working from standard layout pages as well.

2) Controller code 
public class PSS_CA_Hover_Controller {

    private ApexPages.StandardController controller;

    public String baseURL {get; private set;}

	public PSS_CA_Hover_Controller(ApexPages.StandardController controller) {
        this.controller = controller;
        this.baseURL = ApexPages.CurrentPage().getHeaders().get('Host');
	}
}
3) Visual Force page code (plus Chrome inspect element translation) 
<apex:page standardController="Client_Accounts__c" extensions="PSS_CA_Hover_Controller"
           showHeader="false" sidebar="false" >

<!-- Note: using {!baseURL} because eventual usage will be in a Skuid page that points to a different base URL -->
  <div>
    <span>
      <div onmouseover="if (window.hiOn) {hiOn (this);} " 
            onmouseout="if (window.hiOff){hiOff(this);} " 
                onblur="if (window.hiOff){hiOff(this);} " 
               onfocus="if (window.hiOn) {hiOn (this);} ">
        <a href="https://{!baseURL}/{!Client_Accounts__c.Id}" id="lookup{!Client_Accounts__c.Id}"
          onblur="LookupHoverDetail.getHover('lookup{!Client_Accounts__c.Id}').hide(); " 
          onfocus="LookupHoverDetail.getHover('lookup{!Client_Accounts__c.Id}','https://{!baseURL}/{!Client_Accounts__c.Id}/m?retURL=https://{!baseURL}/{!Client_Accounts__c.Id}&isAjaxRequest=1').show(); " 
          onmouseout="LookupHoverDetail.getHover('lookup{!Client_Accounts__c.Id}').hide(); " 
          onmouseover="LookupHoverDetail.getHover('lookup{!Client_Accounts__c.Id}','https://{!baseURL}/{!Client_Accounts__c.Id}/m?retURL=https://{!baseURL}/{!Client_Accounts__c.Id}&isAjaxRequest=1').show();">
          {!Client_Accounts__c.Name}
        </a>
      </div>
    </span>
  </div>
</apex:page>

<!--- Chrome inpsect element returns info below this line:

<body>
  <div>
    <span>
      <div onblur="if (window.hiOff){hiOff(this);} " onfocus="if (window.hiOn) {hiOn (this);} " onmouseout="if (window.hiOff){hiOff(this);} " onmouseover="if (window.hiOn) {hiOn (this);} ">
        <a href="https://MASKED--c.cs51.visual.force.com/a0L5000000dT8aCEAS" id="lookupa0L5000000dT8aCEAS" onblur="LookupHoverDetail.getHover('lookupa0L5000000dT8aCEAS').hide(); " onfocus="LookupHoverDetail.getHover('lookupa0L5000000dT8aCEAS','https://MASKED--c.cs51.visual.force.com/a0L5000000dT8aCEAS/m?retURL=https://MASKED--c.cs51.visual.force.com/a0L5000000dT8aCEAS&amp;isAjaxRequest=1').show(); " onmouseout="LookupHoverDetail.getHover('lookupa0L5000000dT8aCEAS').hide(); " onmouseover="LookupHoverDetail.getHover('lookupa0L5000000dT8aCEAS','https://MASKED--c.cs51.visual.force.com/a0L5000000dT8aCEAS/m?retURL=https://MASKED--c.cs51.visual.force.com/a0L5000000dT8aCEAS&amp;isAjaxRequest=1').show();">
          656182267
        </a>
      </div>
    </span>
  </div>
</body>

-->

4) Everything compiles, I get a nice href link that works, but no hover capability, page is referenced with a passed Id parameter
https://MASKED--c.cs51.visual.force.com/apex/PSS_Test_CA_Hover?Id=a0L5000000dT8aC

The <div> section seems redundant, but saw several examples in Chrome inpsect element with both <div> and <a> 
 
Keegan McCormackKeegan McCormack
Sorry, deleted my old response, and this is a bit of an old question, but the reason is because LookupHoverDetail is defined in main.js, which is only included if showHeader=true in your apex:page.

You can manually include the script with something like:
  
<script src="/jslibrary/1477586318000/sfdc/main.js" type="text/javascript"></script>