Add help text to VF page

Question

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.

Answer 1

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:

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

It will look like this then:

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:

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

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

Answer 2

Here is how it can be added. The resource is just a random image in our org which I will replace with a ? image.

                <apex:column headerValue="Election Status" style="{!if(ben.Account_Benefit__r.Grandfathered__c = TRUE,'background:#BDB76B;', '')}">
                    <img src="/resource/acorn" title="{!$ObjectType.Employee_Session_Benefit__c.Fields.Election_Status__c.inlineHelpText}" height="13" width="13" />
                    <apex:inputField value="{!ben.Election_Status__c}" rendered="{!!sessionEditDisable}"/>
                    <apex:outputField value="{!ben.Election_Status__c}" rendered="{!sessionEditDisable}"/>
                </apex:column>