Visualforce Help Text and a Popup Tool Tip

Visualforce Field Help Text

The help icon can be added to a Visualforce field within an apex:pageBlockSectionItem. Access the help text using the $ObjectType api. Put it in the helptext attribute of the apex:pageBlockSectionItem.

{!$ObjectType.Account.Fields.Phone.InlineHelpText}

Easy Hover Tooltip

The following may help if you are not using the apex:pageBlockSectionItem. I’ve used this technique in the past to put help text on an image in a apex:pageBlockTable and on plain text in a page.

Example:

 
  div.tooltip {
    width: 195px;
    float: left;
  }
  div.tooltip:hover {
    background: #ffffff;
    text-decoration: none;
  } /*BG color is a must for IE6*/
  div.tooltip span {
    display: none;
    padding: 2px 3px;
    margin-left: 8px;
    width: 195px;
  }
  div.tooltip:hover span {
    display: inline;
    position: absolute;
    border: 1px solid #cccccc;
    background: #FFC;;
    color: #000000;
  }

    Hover Over Me
    your message here

Thanks to www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/ for providing an easy way to add tooltip help. He does it by putting the style on the link tag instead of the div.

March 16, 2014: Here is another tutorial that explains how to do a popup tool tip. Tutsplus – Tooltip