Help tip on text field

[alexp]

Hi,

Is there a way to display a help tip next to a text field?

for example I can do this easy with a tool bar...

   tbar:
    [{
     text: 'Add new site',
     tooltip: 'Add a new site to your site list',
...

Can I do something similar with a text field in a form?

Cheers,
Alex

[wuschba]

This code adds tooltip-functionality to all formfields:

	Ext.override(Ext.form.Field, 
	{	afterRender : Ext.form.Field.prototype.afterRender.createSequence(function()
		{
			var qt = this.qtip;
		    if (qt)
		    {	Ext.QuickTips.register({
		        target:  this,
		        title: '',
		        text: qt,
		        enabled: true,
		        showDelay: 20
		    	});
		    }
		})
	});

Set the tip-text with:

    qtip: 'This is my tooltip-text'

[alexp]

That's the ticket! Thanks!

[ianaturner]

I'm doing something similar, but I find that the tip doesn't appear on any of my checkboxes, even though they're Ext.form.Field-derived...

Any clues? (I can see that the tip is being set, just never appears - is checkbox'smouseover event overridden somewhere?)

Ext.onReady(function() {
    // form field tooltips
    Ext.override(Ext.form.Field, {
        afterRender: Ext.form.Field.prototype.afterRender.createSequence(
            function() 
            {
                var tt = this.tooltip;
                if (tt && tt.tip) 
                {
                    Ext.QuickTips.register({
                        target: this,
                        text: tt.tip,
                        enabled: true
                    });
                }
            })
    });

[Remy]

Does anyone know if the above override would work when using applyTo to associate with an existing HTML element?

Loaded question as I've used the override and there's no change in the behaviour. As far as I can see there's no reason why it wouldn't work?

This is a legacy app and hopefully the last one I'll ever maintain that's not fully Ext'd.

[Condor]

The example code is actually wrong. It uses the component as the target, but it should use the element of the target, e.g.

target: this.getEl()

This is also a problem with checkboxes and radios, because the main element is a hidden input.
For checkboxes and radios you should probably use:

target: this.imageEl

So you end up with something like:

Ext.override(Ext.form.Field, {
	afterRender: Ext.form.Field.prototype.afterRender.createSequence(function(){
		if(this.qtip){
			var target = this.getTipTarget();
			if(typeof this.qtip == 'object'){
				Ext.QuickTips.register(Ext.apply({
					  target: target
				}, this.qtip));
			} else {
				target.dom.qtip = this.qtip;
			}
		}
	}),
	getTipTarget: function(){
		return this.el;
	}
});
Ext.override(Ext.form.Checkbox, {
	getTipTarget: function(){
		return this.imageEl;
	}
});

[Chimera]

The example code is actually wrong. It uses the component as the target, but it should use the element of the target, e.g.

target: this.getEl()

This is also a problem with checkboxes and radios, because the main element is a hidden input.
For checkboxes and radios you should probably use:

target: this.imageEl

So you end up with something like:

Ext.override(Ext.form.Field, {
	afterRender: Ext.form.Field.prototype.afterRender.createSequence(function(){
		if(this.qtip){
			var target = this.getTipTarget();
			if(typeof this.qtip == 'object'){
				Ext.QuickTips.register(Ext.apply({
					  target: target
				}, this.qtip));
			} else {
				target.dom.qtip = this.qtip;
			}
		}
	}),
	getTipTarget: function(){
		return this.el;
	}
});
Ext.override(Ext.form.Checkbox, {
	getTipTarget: function(){
		return this.imageEl;
	}
});

Sorry for kicking this thread, but I thought it could be useful.

I use this override for a settings page, the field labels are a short description of what the setting is about, but that's not always enough so I have a longer description as a tooltip (qtip) using this override.

When the field invalidates, the dom element gets a qclass of 'x-form-invalid-tip' and some other qtip text (the error): perfectly good behaviour. However, when you fix the error and clearInvalid() gets called, the dom element's qclass isn't removed, so you get your descriptive text back, but it's shown in an error type of qtip instead of the normal small, blue, iconless qtip.

So, long story short, I override the clearInvalid function with one extra line:

this.el.dom.qclass = '';

Like this:

Ext.override(Ext.form.Field, {
	afterRender: Ext.form.Field.prototype.afterRender.createSequence(function() {
		if(this.qtip) {
			var target = this.getTipTarget();
			if (typeof this.qtip == 'object') {
				Ext.QuickTips.register(Ext.apply({
					  target: target
				}, this.qtip));
			} else {
				target.set({
					qtip: this.qtip
				});
			}
		}
	}),
 	clearInvalid: function(){
        if(!this.rendered || this.preventMark){ // not rendered
            return;
        }
        this.el.removeClass(this.invalidClass);
        switch(this.msgTarget){
            case 'qtip':
                this.el.dom.qtip = '';
                this.el.dom.qclass = '';
                break;
            case 'title':
                this.el.dom.title = '';
                break;
            case 'under':
                if(this.errorEl){
                    Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
                }
                break;
            case 'side':
                if(this.errorIcon){
                    this.errorIcon.dom.qtip = '';
                    this.errorIcon.hide();
                    this.un('resize', this.alignErrorIcon, this);
                }
                break;
            default:
                var t = Ext.getDom(this.msgTarget);
                t.innerHTML = '';
                t.style.display = 'none';
                break;
        }
        this.fireEvent('valid', this);
    },
	getTipTarget: function() {
		return this.el;
	}
});
Ext.override(Ext.form.Checkbox, {
	getTipTarget: function() {
		return this.imageEl;
	}
});

It removes the qclass element from the dom so you get your normal qtip back

[SchattenMann]

ok maybe its me but i can't put this to work O.o

just pasted the code on Condor post at the begining of my file

and have in a form:

                        {
                            xtype: 'textfield',
                            name: 'valor_orc',
                            fieldLabel: 'Valor Orçamentado(€)',
                            qtip: 'This is my tooltip-text',
                            readOnly : false
                        }

nothing happens...no errors but no tip...

[Qtx]

Ext.override(Ext.form.Field, {
    afterRender: Ext.form.Field.prototype.afterRender.createSequence(function(){
        if(this.qtip){
            var target = this.getTipTarget();
            if(typeof this.qtip == 'object'){
                Ext.QuickTips.register(Ext.apply({
                      target: target
                }, this.qtip));
            } else {
                target.dom.qtip = this.qtip;
            }
        }
    }),
    getTipTarget: function(){
        return this.el;
    }
});
Ext.override(Ext.form.Checkbox, {
    getTipTarget: function(){
        return this.imageEl;
    }
});

This works quite well, but I noticed that the tool tips on the fields disappear after resetting the form. How should the method reset be overridden to fix this problem?