How to show Help text and icon in Visualforce page in Salesforce

Its a two step process :

  • First you need CSS of help text icon on you visual force page.
  • Create img tag where you need to display help icon.

[hr]

Please find below sample code for same.

<apex:page standardController="Account">  
    <!-- Style Panel Satrts--->  
    <style type="text/css">  
        .imgclass:hover{  
            background-image: url(/img/help/helpOrbs.gif);  
            background-repeat: no-repeat;  
            width: 16px;  
            height: 15px;     
            background-position: right;  
         
        }  
        .imgclass{  
            background-image: url(/img/help/helpOrbs.gif);  
            background-repeat: no-repeat;  
            width: 16px;  
            height: 15px;  
        }  
    </style>  
    <!-- Style Panel Ends--->  
    <apex:form >  
        <apex:pageBlock >  
            <apex:pageBlockSection title="Enter Information">  
                <apex:pageblockSectionItem >  
                    <apex:outputPanel >  
                        <apex:outputlabel value="Enter Account Name"/>                                          
                        <img src="/s.gif" Class="imgclass" title="Your help text" />  
                    </apex:outputPanel>  
                    <apex:inputField value="{!Account.Name}"/>                
                </apex:pageblockSectionItem>  
            </apex:pageBlockSection>  
        </apex:pageBlock>  
    </apex:form>     
</apex:page>
									

 


 

To get HelpText from the fields dynamically please follow below mention code.

<apex:outputPanel 
      rendered="{!IF($ObjectType.ObjectName__c.Fields.FieldName__c.inlineHelpText == null, false, true)}"> 
      <img src="/s.gif" Class="helpIcon" 
      title="{!$ObjectType.ObjectName__c.Fields.FieldName__c.inlineHelpText}" />
</apex:outputPanel>
									

This post was written by , posted on March 6, 2014 Thursday at 12:00 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Visit Us On FacebookVisit Us On Twitter