Tooltips on form fields

By default you cannot have tooltips on form fields using Ext Js.
This is because by default tooltips are used to display validation messages.
Tooltip validation
To override this and use tooltips to display user help you first need to turn off this default behaviour as follows:

    Ext.form.Field.prototype.msgTarget = 'side';

This sets the validation message target to beside the field.
Side validation messages
Next you need to override the default onRender action for form fields as follows

Ext.override(Ext.form.Field, {
    onRender : function(ct, position){
        Ext.form.Field.superclass.onRender.call(this, ct, position);
        if(!this.el){
            var cfg = this.getAutoCreate();
            if(!cfg.name){
                cfg.name = this.name || this.id;
            }
            if(this.inputType){
                cfg.type = this.inputType;
            }
            if(this.tooltip){
                cfg['ext:qtip'] = this.tooltip.tip;
                cfg['ext:qwidth'] = this.tooltip.width || 100;
            }
            this.el = ct.createChild(cfg, position);
        }
        var type = this.el.dom.type;
        if(type){
            if(type == 'password'){
                type = 'text';
            }
            this.el.addClass('x-form-'+type);
        }
        if(this.readOnly){
            this.el.dom.readOnly = true;
        }
        if(this.tabIndex !== undefined){
            this.el.dom.setAttribute('tabIndex', this.tabIndex);
        }
        
        this.el.addClass([this.fieldClass, this.cls]);
        this.initValue();
    }
});

The key section here is

if(this.tooltip){
    cfg['ext:qtip'] = this.tooltip.tip;
    cfg['ext:qwidth'] = this.tooltip.width || 100;
}

The rest of the onRender function remains unchanged.
What this code does is allows for the definition of a tooltip config object with a tip and optional width as follows

new Ext.form.TextField({
    allowBlank: false,
    blankText: 'You must enter a value for customer',
    emptyText: 'Enter customer',
    maxLength: 100,
    selectOnFocus: true,
    name: 'customer',
    fieldLabel: 'Customer',
    maxLengthText: 'Customer cannot exceed 100 characters',
    tooltip:{
        tip:'Enter the customer\'s name',
        width: 150
    }
})

Which will render a standard tooltip as follows
Field with tooltip
Note you must enable quicktips in your document ready function as follows

Ext.QuickTips.init();