Information Icons with tooltips on Form fields

[michaelm]

Hi all

Wrote this Ext.form.Form extension to add information or help icons next to all your Form
fields. Maybe someone might find it usefull.

/**
   * Overrides the default Ext.form.Form component to add information or help icons
   * with supplied information description as a tooltip for those icons, next to all the form components.
   * 
   * @summary Two parameters are required to use this Ext Form extension. The first is a 'descriptionTitle'
   *	      which will replace the original fieldLabel property. The second is a 'description' which
   *		  represents the tooltip text that will be displayed upon a hover over the info icon.<b> 
   * @published 23 October 2007
   * @version 0.1
   */

  // Create user extensions namespace (Ext.ux)
  Ext.namespace('Ext.ux');

  var imgPath = "images/icons/";  
 
    Ext.ux.FormWithInfoTip = function(config) {

		// call the parent constructor
		Ext.ux.FormWithInfoTip.superclass.constructor.call(this, config);	

	};
		
	// f.descriptionname	
		
	Ext.extend(Ext.ux.FormWithInfoTip, Ext.form.Form, {
	});
		
	Ext.override(Ext.form.Form, {
		  
		render : function(ct) {
		  
	        ct = Ext.get(ct);
	        var o = this.autoCreate || {
	            tag: 'form',
	            method : this.method || 'POST',
	            id : this.id || Ext.id()
	        };
	        this.initEl(ct.createChild(o));

	        this.root.render(this.el);

	        this.items.each(function(f){
	            f.render('x-form-el-'+f.id);

			    // if an information description is supplied
			   // if (ct.description) {  
			    
				 Ext.DomHelper.insertBefore('x-form-el-'+f.id, 
					'<div>'
				+	'<table style="width:100%"><tbody><tr>'
				+	'<td class="x-desc-title">'+f.descriptionTitle+'</td>'			
				+	'<td style="float:right"><div id=ux-form-info-'+f.id+' class="x-information x-icon-combo-icon"></div></td>'			
				+	'</tr></tbody></table>'
				+	'</div>');				
			     		     
				Ext.QuickTips.init();
				
			    Ext.QuickTips.register({
			       target:  Ext.get('ux-form-info-'+f.id),
			       trackMouse: true,
			       text: f.description
			    });		     

			    Ext.QuickTips.enable();
			  //  }
				
	        });

	        if(this.buttons.length > 0){
	            // tables are required to maintain order and for correct IE layout
	            var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
	                cls:"x-form-btns x-form-btns-"+this.buttonAlign,
	                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
	            }}, null, true);
	            var tr = tb.getElementsByTagName('tr')[0];
	            for(var i = 0, len = this.buttons.length; i < len; i++) {
	                var b = this.buttons[i];
	                var td = document.createElement('td');
	                td.className = 'x-form-btn-td';
	                b.render(tr.appendChild(td));
	            }
	        }
	        if(this.monitorValid){ // initialize after render
	            this.startMonitoring();
	        }
	        return this;

		}

	});

And the corresponding CSS stylesheet.

/** Used by the icon information form. **/

.x-help{
	background-image: url(/images/icons/help.png);
}

.x-information{
	background-image: url(/images/icons/information.png); /** /icons/information.png OR /iconInformation.gif**/
}

.x-icon-combo-icon {
	background-repeat: no-repeat;
	background-position: 0 50%;
	width: 18px;
	height: 14px;
	float: right;
}

.x-icon-combo-input {
	padding-left: 26px;
}

.x-form-field-wrap .x-icon-combo-icon {
	top: 3px;
	left: 6px;
}

.x-desc-title{
	font-family: tahoma,arial,helvetica,sans-serif;
	font-size: 12px;
}

[sigaref]

Another solution is mentioned in this thread: link

[PaloAlto]

Thanks for sharing this, it looks interesting.

[burncd]

Hello.

I'm currently developing a form and is there any way we can do this in Java, and not JavaScript?

Regards,
Burncd