2

I have the following VF page code. I want to show the help bubble which is shown when we use apex:inputfield within a pageblocktablesectionItem on the pageBlocktable column header.

 <apex:pageBlock>
        <apex:pageBlockTable var="s" value="{!rulesList}" >
            <apex:column headerValue="{!$ObjectType.Rules_Engine__c.Fields.Name.Label}"  id="pbrulesName"> 
                 <apex:inputField value ="{!s.name}" />
            </apex:column>
            <apex:column headerValue="{!$ObjectType.Rules_Engine__c.Fields.Field_Name__c.Label}"   id="pbrulesFieldName"  >  
                 <apex:selectList value="{!s.Field_Name__c}"  size="1">
                     <apex:selectOptions value="{!leadFieldListSO}"/>
                 </apex:selectList>
            </apex:column>
            <apex:column headerValue="Operator"  id="pbrulesOperator"> 
                 <apex:inputField value ="{!s.Operator__c}" />
            </apex:column>
            <apex:column headerValue="Value"  id="pbrulesValue"> 
                 <apex:inputField value ="{!s.Value__c}" />
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlock>

Any pointers?

1 Answer 1

2

added the css code in the style tag and then palced the outputpanel beside the field where I want the help text.

.helpTooltip {
            border:1px solid #ECD3BF;
            background-color:#F8E7CA;
            display:block;
            color:white;
            border-radius:12px; 
            -webkit-border-radius:12px; 
            -moz-border-radius:12px; 
            width:15px;
            height:15px;
            line-height:15px;
            text-align:center;
            vertical-align:middle;
            cursor:help;
            font-size:12px;
            font-weight:normal;
        }
        .helpTooltip:hover {
            border:1px solid #DF690A;
            background-color:#FEB027;
        }
        .helpTooltip span {
            z-index:10;
            display:none; 
            padding:5px;
            margin-left:15px;
            width:700px; 
            text-align:left;
            font-size:12px;
            font-weight:normal;
        }       
        .helpTooltip:hover span {
            display:inline; 
            position:absolute;  
            top:10%;
            left:20%;
            color:black;
            border:1px solid #FFA603; 
            background:#FEFDB9;
        }

<apex:outputPanel rendered="{!$ObjectType.MyField__c.fields[fieldName].inlineHelpText != null}">

<span class="helpTooltip">                          
         ?
 <span style="white-space:pre;">{!$ObjectType.MyField__c.fields[fieldName].inlineHelpText}</span>

</span>

</apex:outputPanel>

You must log in to answer this question.

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