Add quicktips to extjs 4 form elements and mark required elements with a red asterisk and the text 'required' in the qtip text body.

Ext4QuickTips.js

/*Call this method after the form has rendered, so either on the afterrender event, or from within a
method bound to that or a similar event that is fired after the form/component has rendered.
Pass the name/id of the form in a way that can be accessed using an ext component query.

In your view/form items array, for each element that you want to have a quicktip, set the property 
qtip: 'your tooltip text here.'

If you want the required asterisk and text, set the property allowBlank: false

e.g.

{ name: 'dateArrived', xtype: 'datefield', fieldLabel: 'Date Arrived', qtip: 'Date customer arrived.', allowBlank: false }

*/

/**
 * Loops through all child elements of the passed component (form) and checks for and applies
 * any tooltips found with the QuickTipManager.
 * @param formName - the name of the component(form) to look for qtip properties.
 */
setupQuickTips: function(formName){
    Ext.tip.QuickTipManager.init();
    Ext.Array.forEach(Ext.ComponentQuery.query(formName + ' *'), function(el){
        if (el.qtip){
            if (el.fieldLabel && el.allowBlank == false) el.setFieldLabel('<a class="required-ast">*</a>' + el.getFieldLabel());
            if (el.allowBlank == false) el.qtip += '<a class="required">&nbsp;&nbsp;required</a>';
            Ext.QuickTips.register({
                target: el.id,
                text: el.qtip
            });
        }
    });
}

/*CSS Styles used by the quicktip required anchors.*/

.required {
    font-size: 10px;
    color: #d10000 !important;
    line-height: 14px;
}

.required-ast {
    font-size: 10px;
    color: #d10000 !important;
    position: absolute;
    margin-top: -3px;
    margin-left: -7px;
}