How to add field help text in visualforce page

Question

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

Answer 1

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}"/>
</apex:pageBlockSectionItem>

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}"/>
</apex:pageBlockSectionItem>

Answer 2

CSS code:

div.tooltip {
    width: 20px;
    float: right;
    display:inline;
}

div.tooltip span {
    display: none;
    font-weight:normal;
    text-align:left;
    padding: 3px 5px;
    margin-left: 8px;
    width: 250px;
}

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

HTML code:

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

Answer 3

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

Answer 4

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>
    </div>
</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