tooltip on Ext.form.Field / Labels

[mdissel]

I want to define some a tooltip on a Ext.form.Field component. Optionally you want to show the tooltip on the complete control or only on the control or on the label..

Thanks

Marco

[mdissel]

(using 2.0 codebase)
This is what i've got sofar... But i want to show the tooltip on the complete div that is surrounding the fields (label and input box). Any tips how to find that div?

Ext.override(Ext.form.Field, {
  afterRender : function() {
		Ext.form.Field.superclass.afterRender.call(this);		
		if (this.description) {
				Ext.QuickTips.register({
				target:  this.container || this.el,
//				title: this.fieldLabel || '',
				text: this.description
			});
  	}
  }
});

The rendered HTML is like this. I want to show the description when the mouse hovers in the outermost div.. (if possible, else on label and inputbox)

<div tabindex="-1" class="x-form-item">
  <label class="x-form-item-label" style="width: 125px;" for="ext-comp-1004">Client Code:</label>
   <div style="padding-left: 130px;" id="x-form-el-ext-comp-1004" class="x-form-element">
     <input type="text" name="SearchClientCode" id="ext-comp-1004" autocomplete="off" size="20" class="x-form-text x-form-field" tabindex="1" style="width: 231px;"/>
  </div>
</div>

Thanks

Marco

[danh2000]

Here's an example I use for check box (it's parent div has a class of 'x-form-check-wrap'):

Ext.QuickTips.init();
Ext.override(Ext.form.CheckBox, {
  afterRender : function() {
        Ext.form.CheckBox.superclass.afterRender.call(this);            
        var qt = this.qtipText;
        if(qt){
                Ext.QuickTips.register({
                target:  this,
                title: '',
                text: qt,
                enabled: true
            });
            var wrapDiv = this.getEl().up('div.x-form-check-wrap');
                
            if(wrapDiv){
                var label = wrapDiv.child('label');
                Ext.QuickTips.register({
                    target:  label,
                    title: '',
                    text: qt,
                    enabled: true
                });
            }
          }
  }
}); 

I then simply provide a qtipText property to any form field - the field and it's label both get a qtip... you could easily extend this by registering another qtip with the target set to the containing div (in my example wrapDiv).

[danh2000]

Here's a more dynamic approach that seems to work for all fields:

Ext.override(Ext.form.Field, {
  afterRender : function() {            
        if(this.qtipText){
                Ext.QuickTips.register({
                target:  this.getEl(),
                title: '',
                text: this.qtipText,
                enabled: true
            });
            var label = findLabel(this);
            if(label){
                Ext.QuickTips.register({
                    target:  label,
                    title: '',
                    text: this.qtipText,
                    enabled: true
                });
            }
          }
          Ext.form.Field.superclass.afterRender.call(this);
  }
});

var findLabel = function(field) {
    
    var wrapDiv = null;
    var label = null
    //find form-element and label?
    wrapDiv = field.getEl().up('div.x-form-element');
    if(wrapDiv) 
    {
        label = wrapDiv.child('label');        
    }
    if(label) {
        return label;
    }
    
    //find form-item and label
    wrapDiv = field.getEl().up('div.x-form-item');
    if(wrapDiv) 
    {
        label = wrapDiv.child('label');        
    }
    if(label) {
        return label;
    }    
} 

[sigaref]

Thank you very much for this code. I have changed it for viewing a small Image with Tooltip next to the label, the code is:

 Ext.override(Ext.form.Field, {
  afterRender : function() {  
  	       
        if(this.helpText){

            var label = findLabel(this);

            if(label)
            {                 	  
            	    	
             	var helpImage = label.createChild({
             			tag: 'img', 
             			src: '/images/global/questionmark.gif',
             			style: 'margin-bottom: 0px; margin-left: 5px; padding: 0px;',
             			width: 10,
             			height: 11
             		});            	
             	
	                   	
                Ext.QuickTips.register({
                    target:  helpImage,                   
                    text: this.helpText,
                    enabled: true
                });
                
            }
          }
        Ext.form.Field.superclass.afterRender.call(this);    
        this.initEvents();  
  }
});

var findLabel = function(field) {
    
    var wrapDiv = null;
    var label = null

    //find form-item and label
    wrapDiv = field.getEl().up('div.x-form-item');
    if(wrapDiv) 
    {
        label = wrapDiv.child('label');        
    }
    if(label) {
        return label;
    } 

    /*
    
    //find form-element and label?
    wrapDiv = field.getEl().up('div.x-form-element');
    if(wrapDiv) 
    {
        label = wrapDiv.child('label');        
    }
    if(label) {
        return label;
    }
    */
   
}

Edit: Added "this.initEvents(); "

[Zyclops]

Thanks Guys!

I modified so I could also add just on labels as well as specify a qtip title.

Ext.override(Ext.form.Label, {
  afterRender : function() {            
    if(this.qtipText){
      Ext.QuickTips.register({
        target:  this.getEl(),
        title: this.qtipTitle,
        text: this.qtipText,
        enabled: true
      });
    }
    Ext.form.Label.superclass.afterRender.call(this);
  }   
});


Ext.override(Ext.form.Field, {
  afterRender : function() {   
    var findLabel = function(field) {
      var wrapDiv = null;
      var label = null;
      //find form-element and label?
      wrapDiv = field.getEl().up('div.x-form-element');
      if(wrapDiv) {
        label = wrapDiv.child('label');        
      }
      if(label) {
        return label;
      }

      //find form-item and label
      wrapDiv = field.getEl().up('div.x-form-item');
      if(wrapDiv) {
        label = wrapDiv.child('label');        
      }
      if(label) {
        return label;
      }    
    };   
    
    if(this.qtipText){
      Ext.QuickTips.register({
        target:  this.getEl(),
        title: this.qtipTitle,
        text: this.qtipText,
        enabled: true
      });
      var label = findLabel(this);
        if(label) {
          Ext.QuickTips.register({
            target:  label,
            title: this.qtipTitle,
            text: this.qtipText,
            enabled: true
          });
        }
    }
    Ext.form.Field.superclass.afterRender.call(this);
  }
});

[Zyclops]

I found the override prevents some comboboxes and other third party extensions from working. Overriding afterRender at all seems to cause the issue.

[djbokka]

Zyclops,

I ran into the same issue with comboboxes. Default values, width, etc. are removed. Have you, by chance, found a workaround for this?

[jack.slocum]

The original posted override removes the default form field afterRender functionality.

In particular, these two calls:

this.initEvents();
this.initValue();

You can add them back in the override and it should work fine.

[djbokka]

thanks jack,

it did work for the value but it still doesn't read the width. should this be covered by this.initEvents()?