Hover HelpText

Use Case

We come across various use cases where we cannot have the apex input field as a child item directly under the apex page block section. Or we cannot use apex input field at all and hence need to use some other tag. If you want to show salesforce field helptext with an on-hover icon then here is a way which would allow you to add your custom hover help text which looks and behaves exactly same to the standard hover help text.

Solution

Here is the code you need to add in your pageblocksectionitem. The label needs to be a child item of a span and we will pass the id of the span to the standard function which is available by standard salesforce.com javascript itlself.

The Label tag is added under an output panel because pageblocksection item can only have 2 direct children.
The important points to note are

·                     Id of span passed to the JavaScript function is the first part of the string. The second part i.e.   "-_help" is not passed to the setHelp method. 

·                     sfdcPage.setHelp is the method which adds the on hover functionality to the image. 

·                     If you miss the style class "helpButton" to the span then the on hover behavior will not work properly.

Reusable Code

<apex:outputPanel >

       <span class="helpButton" id="ANZSICcodeforLiab-_help"> 

             <apex:outputLabel value="{!$ObjectType.Common_Details__c.fields.Primary_Rating_ANZSIC_Code__c.Label}" for="PrimaryRatingANZSIC"/>

             <img class="helpOrb" src="/s.gif" />

             <script>

                  sfdcPage.setHelp('ANZSICcodeforLiab', '{!JSENcode($ObjectType.Common_Details__c.fields.Primary_Rating_ANZSIC_Code__c.inlineHelpText)}');

             </script>

       </span>

</apex:outputPanel>