How to add field help text in visualforce page

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>

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>