I want to refer standard help text style in visualforce page, how to realize this?

4 Answers 4


Easier than using CSS, you can do it with Visualforce tags

<apex:pageBlockSectionItem helpText="{!$ObjectType.YOUR_OBJECT.fields.YOUR_FIELD.InlineHelpText}">
    <apex:outputField value="{!REF_TO_OBJ_FROM_CONTROLLER.YOUR_FIELD}"/>

For example, if you have the following controller :

public class MyController{
    public Account myAccount{get;set;}

     public MyController(ApexPages.StandardController stdController){
        myAccount = stdController.getRecord();

And you just want to display account name with the help text, add this code to your VF page

<apex:pageBlockSectionItem helpText="{!$ObjectType.Account.fields.Name.InlineHelpText}">
        <apex:outputField value="{!myAccount.Name}"/>
  • yes, you are right, but sometimes for flexible, we have to use custom css instead of standard vf tags. these solutions depends on situations. Thanks :)
    – Allen Li
    Commented Feb 25, 2015 at 4:24
  • This only works if you have the showHeader option on the apex:page tag set to true, which for some public sites, isn't an option. Commented May 14, 2015 at 17:17

CSS code:

div.tooltip {
    width: 20px;
    float: right;

div.tooltip span {
    display: none;
    padding: 3px 5px;
    margin-left: 8px;
    width: 250px;

div.tooltip:hover span {
    display: inline;
    position: absolute;
    border: 1px solid #cccccc;
    background: #FFC;
    color: #000000;

HTML code:

<div class="helpOrb tooltip" style="position:relative;left:10px">
       help text

Always use inputfield or outputfield and embed it in Apex pageblock in order get standard help text icon in VF page.


Create a component:

<apex:component selfClosing="true">
<apex:attribute name="helpText" description="Help Text." type="String" required="true"/>
<div class="mouseOverInfoOuter" id="searchInvoiceHelper" onfocus="addMouseOver(this)" onmouseover="addMouseOver(this)" tabindex="0">
    <img src="/s.gif" alt="" class="infoIcon" title="" />
    <div class="mouseOverInfo" id="searchInvoiceHelperText" style="display: none; opacity: -0.19999999999999996; left: 1px;">
        <div class="body">{!helpText}</div>

Use that component:

<label>SomeInput: </label><c:helpicon helpText="Need to put in data here."/><apex:inputField />

Further reference from URL: http://www.codebycody.com/2014/08/super-simple-help-text.html

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .