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


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
    Feb 25 '15 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. May 14 '15 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.