+ Start a Discussion
Kent LichtyKent Lichty 

How to display standard help text in custom VisualForce page

I am quite new to Force.com development, and I am struggling with an issue that I thought would be quite simple.  I have a custom VisualForce page, and I want the help text bubble icon and text to be displayed on my page, but I cannot figure out how to do that. I have read the posts on this forum for that same question and have implemented what I think is the correct approach, but it still shows nothing.  My VF code is like this:

<apex:pageBlockSectionItem HelpText="{!$ObjectType.BNTE_Build_Note__c.Fields.Work_Order_ID__c.InlineHelpText}"> 
                    <apex:outputLabel value="{!$ObjectType.BNTE_Build_Note__c.fields.Work_Order_ID__c.label}"/>
                    <apex:inputField value="{!BNTE_Build_Note__c.Work_Order_Id__c}"/> 
                 </apex:pageBlockSectionItem>

My page is set to ShowHeader = "true".

Could anybody suggest what I could try to get this to work?
Best Answer chosen by Kent Lichty
Santosh Kumar 348Santosh Kumar 348
Hi Kent,

Got your issue now, as it's known issue of Salesforce that help text is not visible. I have tried to sort out your requirement but there will be extra bit of development and code required.
<apex:page standardController="Account" lightningStylesheets="true">
    <style>
        .vfHelpText a            {position:relative;}
        .vfHelpText a span       {display: none;}
        .vfHelpText a:hover span {display: block;
        position:absolute;
        top:1.05em;
        padding:2px 5px;
        right:1em; width:17em;  
        background-color:#FEFDB9;
        color:black;
        }
    </style>
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:pageBlockSectionItem  helpText="{!$ObjectType.Account.Fields.Active__c.InlineHelpText}">
                    {!$ObjectType.Account.Fields.Active__c.Label}
                    <span class="vfHelpText">
                        <a href="javascript:return false">
                            <img src="/s.gif" alt="" class="helpOrb" title=""/>
                            <span style="text-align: left;">{!$ObjectType.Account.Fields.Active__c.InlineHelpText}</span>                                                       
                        </a>        
                    </span>
                    <apex:inputField value="{!Account.Active__c}" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

User-added image

So this is workaround.

Mark this answer as close, If it serves your purpose. So that it will be hepful for others.

Regards,
Santosh.

All Answers

AnudeepAnudeep (Salesforce Developers) 
Hi Kent, 

Your usage is correct. Just ensure that you use the field name as described in the documentation  helpText instead of 'HelpText' 
{!$ObjectType.CustomObjectName__c.fields.CustomFieldName__c.inlineHelpText}

You can also narrow this down by verifying if the following works
<apex:pageBlockSectionItem helpText="My custom help text...">
Anudeep

 
Kent LichtyKent Lichty
Anudeep, thanks you so very much for your quick response; I really appreciate it! I tried all the things you suggested, and it still did not work. Then I thought that I would try it using Classic mode (since we are all new to Salesforce we are using Lightning exclusively) and then it worked fine! I did not even need the additional pageBlockSectionItem line, as the standard help text just showed up for all my fields. So that then begs the question: can the normal help text be made to display in a custom VisualForce page using Lightning, or is that just not possible at this time? Thanks again.
Santosh Kumar 348Santosh Kumar 348
Hi Kent,

If you are using <apex:inputField> it is not required to add any help text separately, just keep the field under this hierarchy :
<apex:form>, apex:pageBlock, apex:pageBlockSection, apex:inputField
<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.Active__c}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
You can see the result in below image.
User-added image
And the other way is adding help text manually like you are trying here also the pageblock hierachy matter:
<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock >  
            <apex:pageBlockSection >
                <apex:pageBlockSectionItem helpText="{!$ObjectType.Account.Fields.Active__c.InlineHelpText}">
                    <apex:outputLabel value="{!$ObjectType.Account.Fields.Active__c.Label}" />
                    <apex:inputField value="{!Account.Active__c}" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>            
        </apex:pageBlock>
    </apex:form>
</apex:page>

User-added image

Please adjust your code accordingly, it should work. 

Mark this answer as close, If it serves your purpose. So that it will be hepful for others.

Regards,
Santosh.
Kent LichtyKent Lichty
Santosh, thanks very much for your response; which I very much appreciate. However, while your instructions work perfectly well in CLASSIC, they clearly do NOT work in the new LIGHTNING environment. Does anyone know if basic help text is supported in custom VisualForce pages in Lightning? That is clearly the issue.
Santosh Kumar 348Santosh Kumar 348
Hi Kent,

Got your issue now, as it's known issue of Salesforce that help text is not visible. I have tried to sort out your requirement but there will be extra bit of development and code required.
<apex:page standardController="Account" lightningStylesheets="true">
    <style>
        .vfHelpText a            {position:relative;}
        .vfHelpText a span       {display: none;}
        .vfHelpText a:hover span {display: block;
        position:absolute;
        top:1.05em;
        padding:2px 5px;
        right:1em; width:17em;  
        background-color:#FEFDB9;
        color:black;
        }
    </style>
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:pageBlockSectionItem  helpText="{!$ObjectType.Account.Fields.Active__c.InlineHelpText}">
                    {!$ObjectType.Account.Fields.Active__c.Label}
                    <span class="vfHelpText">
                        <a href="javascript:return false">
                            <img src="/s.gif" alt="" class="helpOrb" title=""/>
                            <span style="text-align: left;">{!$ObjectType.Account.Fields.Active__c.InlineHelpText}</span>                                                       
                        </a>        
                    </span>
                    <apex:inputField value="{!Account.Active__c}" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

User-added image

So this is workaround.

Mark this answer as close, If it serves your purpose. So that it will be hepful for others.

Regards,
Santosh.
This was selected as the best answer
Kent LichtyKent Lichty
Santosh, thanks so much for your code below; I have not tried it out yet but I will as soon as I can. That is a LOT of coding for a function that should really be supported normally. I will mark this question as “closed” if your code works. Again, thanks so much to you for what looks to be a very SIGNIFICANT coding effort on your part.
Kent LichtyKent Lichty
Santosh, your code worked beautifully, and I am going to mark this question as “closed” (if I can figure out how). The only minor issue is that the label for the next field can be seen underneath the help text rectangle, so if you have a fix for that I would appreciate it. But you far exceeded my expectations, so don’t worry about that! We have a javascript/stylesheet expert here who I can ask to see if he can make the help text opaque. Thanks again! [cid:image001.png@01D63F14.21DE2230]
Santos edgard marquinaSantos edgard marquina
Tengo el mismo problema con Magna TV (https://ovnitv.org/) ya que el codigo me tira error. 
Kent LichtyKent Lichty
Hola Santos; One of the guys in the forum provided me with this code which, although it requires a lot of work, DOES work fine to bring up the help/hover text for the field enclosed in the pageBlockSectionItem. .vfHelpText a {position:relative;} .vfHelpText a span {display: none;} .vfHelpText a:hover span {display: block; position:absolute; top:1.05em; z-index: 200; padding:2px 5px; right:1em; width:17em; background-color:#6433FF; color:white; }
{!$ObjectType.BNTE_Build_Note__c.fields.Work_Order_Id__c.label} {!$ObjectType.BNTE_Build_Note__c.Fields.Work_Order_Id__c.InlineHelpText}