[SalesForce] Add help text to VF page

Can someone share how I can show the help text icon and text in my page?

Here is a snipping of the area I want to add help text to.

<apex:pageBlock id="pb_BenUnderReview" title="Benefits Under Admin Review" rendered="{!adminRender}" >

            <apex:pageBlockTable id="pbt_myTable_2" value="{!esb_List_review}" var="rev" >

                <apex:column headerValue="Account Benefit" > 
                    <apex:outputLink value="/{!rev.Account_Benefit__r.id}" target="_blank">{!rev.Account_Benefit__r.Name}</apex:outputLink>
                </apex:column>

                <apex:column headerValue="Election Status" title="Election Status" >
                    <apex:inputField value="{!rev.Election_Status__c}" rendered="{!paperRender}" />
                    <apex:outputText value="{!rev.Election_Status__c}" rendered="{!!paperRender}" />
                </apex:column>

                <apex:column headerValue="Paper Status" >
                    <apex:inputField value="{!rev.Paper_Status__c}" rendered="{!paperRender}" />
                    <apex:outputText value="{!rev.Paper_Status__c}" rendered="{!!paperRender}" />  
                </apex:column>

                <apex:column headerValue="Incomplete Reason" >
                    <apex:inputField value="{!rev.Incomplete_Reason__c}" rendered="{!incompleteRender}" />
                    <apex:outputText value="{!rev.Incomplete_Reason__c}" rendered="{!!incompleteRender}" />  
                </apex:column>

                <apex:column headerValue="Per Payroll Premium" >
                    <apex:inputField value="{!rev.Premium__c}" rendered="{!paperRender}" />
                    <apex:outputText value="{!rev.Premium__c}" rendered="{!!paperRender}" />
                </apex:column>

                <apex:column headerValue="Volume" rendered="{!showVolume}"> 
                    <apex:inputField value="{!rev.Volume__c}" rendered="{!paperRender && rev.Account_Benefit__r.Show_Volume__c}"/>
                    <apex:outputText value="{!rev.Volume__c}" rendered="{!!paperRender && rev.Account_Benefit__r.Show_Volume__c}"/>
                </apex:column>

                <apex:column headerValue="Elimination Period" rendered="{!showEliminationPeriod}"  >
                    <apex:inputField value="{!rev.Elimination_Period__c}" rendered="{!paperRender && rev.Account_Benefit__r.Show_Elimination_Period__c}"/>
                    <apex:outputText value="{!rev.Elimination_Period__c}" rendered="{!!paperRender && rev.Account_Benefit__r.Show_Elimination_Period__c}"/> 
                </apex:column>

            </apex:pageBlockTable>

            <apex:pageBlockButtons id="pbb_save_admin" location="bottom" rendered="{!adminButtons}" >
                <apex:commandButton action="{!saveAdminNewPage}" value="Save Admin Changes" 
                                    title="Saves changes in the 'Benefits Under Admin Review' section only."
                                    alt="Saves changes in the 'Benefits Under Admin Review' section only."
                                    styleClass="myDataButton"
                                    rendered="{!!serviceSession}" rerender="theForm" status="status"/>
           </apex:pageBlockButtons>  


        </apex:pageBlock>

I want the help text on either the column headerValue line or the inputField line. I have set the Title value but this isn't as fancy as the normal help text.

Is there a way of adding like a graphic to the column headerValue that when you hover it shows the help text for that field or maybe is there a way of doing like a outputpanel that only shows on hover?

The object that this field is on is called Employee_Session__c

I have seen some comments on a feature called like lookuphoverdetail but I can't seem to get the syntax correct for usage.

Best Answer

There are some options for the help text usage.

1. Display help text entered in the custom field under "Help Text". This text appears if you use a pageBlock together with an outputField:

enter image description here

<apex:pageBlock>
    <apex:pageBlockSection>
        <apex:outputField value="{!Account.House__c}" />
    </apex:pageBlockSection>
</apex:pageBlock>

It will look like this then:

enter image description here

2. Use the apex:pageBlockSectionItem with attribute helpText filled. You can then "override" or better say use you own custom help text independent of another one from the custom field:

<apex:pageBlock>
    <apex:pageBlockSection>
        <apex:pageBlockSectionItem helpText="My custom help text...">
            <apex:outputLabel value="My Label"/>
            <apex:inputText value="{!Account.House__c}" />
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
</apex:pageBlock>

Looks like this then:

enter image description here

3. Use a global variable ObjectType to access a fields help text directly:

{!$ObjectType.CustomObjectName__c.fields.CustomFieldName__c.inlineHelpText}