Hybrid View

  1. #1
    Sencha User alexp's Avatar
    Join Date
    Oct 2008
    Posts
    30
    Vote Rating
    0
    alexp is on a distinguished road

      0  

    Question Help tip on text field

    Help tip on text field


    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...

    Code:
       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

  2. #2
    Sencha User
    Join Date
    Apr 2008
    Posts
    365
    Vote Rating
    0
    wuschba is on a distinguished road

      0  

    Default


    This code adds tooltip-functionality to all formfields:

    Code:
    	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:
    Code:
        qtip: 'This is my tooltip-text'

  3. #3
    Sencha User alexp's Avatar
    Join Date
    Oct 2008
    Posts
    30
    Vote Rating
    0
    alexp is on a distinguished road

      0  

    Thumbs up


    That's the ticket! Thanks!

  4. #4
    Ext User
    Join Date
    Jan 2008
    Posts
    21
    Vote Rating
    0
    ianaturner is on a distinguished road

      0  

    Question What about checkboxes??

    What about checkboxes??


    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?)

    Code:
    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
                        });
                    }
                })
        });

  5. #5
    Sencha User Remy's Avatar
    Join Date
    Apr 2008
    Posts
    298
    Vote Rating
    0
    Remy is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    The example code is actually wrong. It uses the component as the target, but it should use the element of the target, e.g.
    Code:
    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:
    Code:
    target: this.imageEl
    So you end up with something like:
    Code:
    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;
    	}
    });

  7. #7
    Ext User
    Join Date
    Oct 2007
    Posts
    8
    Vote Rating
    0
    Chimera is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    The example code is actually wrong. It uses the component as the target, but it should use the element of the target, e.g.
    Code:
    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:
    Code:
    target: this.imageEl
    So you end up with something like:
    Code:
    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:
    Code:
    this.el.dom.qclass = '';
    Like this:
    Code:
    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

  8. #8
    Sencha User
    Join Date
    Mar 2009
    Posts
    227
    Vote Rating
    0
    SchattenMann is an unknown quantity at this point

      0  

    Default


    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:

    Code:
                            {
                                xtype: 'textfield',
                                name: 'valor_orc',
                                fieldLabel: 'Valor Orçamentado(€)',
                                qtip: 'This is my tooltip-text',
                                readOnly : false
                            }
    nothing happens...no errors but no tip...

  9. #9
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    Quote Originally Posted by Condor View Post
    Code:
    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?