Visual Force Pages - Placing Custom "Help Text" Orbs

Greeting Reader smiley ,

I hope you enjoy working in Salesforce.

In this post, I will show you in simple steps to place custom help text orbs in VF page.

Visualforce page is the great way to enhance the user interface in Salesforce platform. Developers who are familiar with Visualforce pages must have also used PageBlockTable , which displays a set of data defined by a variable. Basically when you define a PageBlockTable, you have set of columns that serve as headers and set of rows/records. So have you ever wondered if there is way to place Help text Orbs (that comes with field help text) to be placed near the column header value ?!.surprise

Yes, there is a way to define some custom help text that can be displayed near the column header. So, in this post i will be showing you some simple steps to achieve this. Let's get started.

1. Creating Style class:

In your Visualforce page, you need to add style classes to be used in the img tag. This CSS class will help in rendering the help orbs - the standard help text logo in Salesforce.

you can use the below styles :

 

<style type="text/css"> 
    .imgclass:hover{ 
        background-image: url(/img/help/helpOrbs.gif); 
        background-repeat: no-repeat; 
        width: 16px; 
        height: 15px; 
        background-position: right; 
    } 
    .imgclass{ 
        background-image: url(/img/help/helpOrbs.gif); 
        background-repeat: no-repeat; 
        width: 16px; 
        height: 15px; 
    } 
  </style> 

2. Adding  Help Text Orbs Column headers:

when you create PageBlockTable you will be creating something similar like below :

<apex:pageblocktable value={!ListVariable} var=somevar>

             <apex:column headerValue="Some header text" >

             </apex:column>

</apex:pageblocktable>

 

This will generally render only the text "some header text" on the column title. To include help text orbs you need to add <apex:facet> component to the column. So the modified code will look like :

<apex:column headerValue="Some header Value" >

    <apex:facet name="header">

            Some header Value

           <img src="/s.gif"  class = "imgclass"  title = "Your help text goes here" >

   </apex:facet>

</apex:column>

 

The <img> will place our help orbs image on the page. The title is the place where you need to add the help text, which will be displayed on hover.

 

If all goes correct, then you will see something like :

when you hover your cursor you will see like :

I hope this post will help you in someway . Thanks for reading. yes

If you have any queries or comments please drop them in below comments section. mail

Have a good day smiley

Rating: 
No votes yet