How to set tooltip to Ext.form.TextField where input type is file?












0















I am new to extjs, and I want to set tooltip to field lable of Ext.form.TextField with input type file.
I try to do this by follwing code but its not working.



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


this.myTestComponent = new Ext.form.TextField({
fieldLabel: 'My Field lable',
qtip: 'My Field Tooltip',
name: 'field1',
scope: this,
inputType: 'file',
width: 150
})









share|improve this question

























  • What exactly is not working? And are you using ExtJS 3? Thanks.

    – Zhorov
    Nov 27 '18 at 8:42













  • Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working

    – Amita Patil
    Nov 27 '18 at 8:45


















0















I am new to extjs, and I want to set tooltip to field lable of Ext.form.TextField with input type file.
I try to do this by follwing code but its not working.



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


this.myTestComponent = new Ext.form.TextField({
fieldLabel: 'My Field lable',
qtip: 'My Field Tooltip',
name: 'field1',
scope: this,
inputType: 'file',
width: 150
})









share|improve this question

























  • What exactly is not working? And are you using ExtJS 3? Thanks.

    – Zhorov
    Nov 27 '18 at 8:42













  • Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working

    – Amita Patil
    Nov 27 '18 at 8:45
















0












0








0








I am new to extjs, and I want to set tooltip to field lable of Ext.form.TextField with input type file.
I try to do this by follwing code but its not working.



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


this.myTestComponent = new Ext.form.TextField({
fieldLabel: 'My Field lable',
qtip: 'My Field Tooltip',
name: 'field1',
scope: this,
inputType: 'file',
width: 150
})









share|improve this question
















I am new to extjs, and I want to set tooltip to field lable of Ext.form.TextField with input type file.
I try to do this by follwing code but its not working.



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


this.myTestComponent = new Ext.form.TextField({
fieldLabel: 'My Field lable',
qtip: 'My Field Tooltip',
name: 'field1',
scope: this,
inputType: 'file',
width: 150
})






extjs extjs3






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 27 '18 at 6:34







Amita Patil

















asked Nov 27 '18 at 6:27









Amita PatilAmita Patil

2342414




2342414













  • What exactly is not working? And are you using ExtJS 3? Thanks.

    – Zhorov
    Nov 27 '18 at 8:42













  • Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working

    – Amita Patil
    Nov 27 '18 at 8:45





















  • What exactly is not working? And are you using ExtJS 3? Thanks.

    – Zhorov
    Nov 27 '18 at 8:42













  • Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working

    – Amita Patil
    Nov 27 '18 at 8:45



















What exactly is not working? And are you using ExtJS 3? Thanks.

– Zhorov
Nov 27 '18 at 8:42







What exactly is not working? And are you using ExtJS 3? Thanks.

– Zhorov
Nov 27 '18 at 8:42















Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working

– Amita Patil
Nov 27 '18 at 8:45







Yes I am using ExtJs 3, qtip: 'My Field Tooltip' is not working. I want to set tooltip to field lable. but my TextField's type is file, its not working

– Amita Patil
Nov 27 '18 at 8:45














2 Answers
2






active

oldest

votes


















1














Try it like this:



        {
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}





share|improve this answer
























  • It gives error - TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 5:59











  • if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.

    – Fabio Barros
    Nov 28 '18 at 12:22











  • yes, its inside panel

    – Amita Patil
    Nov 28 '18 at 12:47











  • Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20

    – Fabio Barros
    Nov 28 '18 at 13:03











  • Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 14:04



















1














Solution:



I'll answer exactly to your question - if you want to add a tooltip, you can use this:



Ext.onReady(function() {
Ext.QuickTips.init();

var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});

var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});

})


Notes:



Tested with ExtJS 3.4.



Config fieldLabel is only used when textfield is rendered by a container which has been configured to use the FormLayout layout manager.



One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.



You can see this fiddle.






share|improve this answer


























  • Thank you sir, I used your code. But still its not working

    – Amita Patil
    Nov 27 '18 at 10:45











  • @AmitaPatil I've updated the answer with working fiddle.

    – Zhorov
    Nov 27 '18 at 11:29











  • it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field

    – Amita Patil
    Nov 27 '18 at 11:47













  • @AmitaPatil See updated answer and fiddle. Thanks.

    – Zhorov
    Nov 29 '18 at 9:23











  • Hello sir, it works but it shows both tooltips on brows button

    – Amita Patil
    Nov 29 '18 at 13:01











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53493929%2fhow-to-set-tooltip-to-ext-form-textfield-where-input-type-is-file%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














Try it like this:



        {
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}





share|improve this answer
























  • It gives error - TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 5:59











  • if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.

    – Fabio Barros
    Nov 28 '18 at 12:22











  • yes, its inside panel

    – Amita Patil
    Nov 28 '18 at 12:47











  • Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20

    – Fabio Barros
    Nov 28 '18 at 13:03











  • Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 14:04
















1














Try it like this:



        {
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}





share|improve this answer
























  • It gives error - TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 5:59











  • if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.

    – Fabio Barros
    Nov 28 '18 at 12:22











  • yes, its inside panel

    – Amita Patil
    Nov 28 '18 at 12:47











  • Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20

    – Fabio Barros
    Nov 28 '18 at 13:03











  • Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 14:04














1












1








1







Try it like this:



        {
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}





share|improve this answer













Try it like this:



        {
xtype:'textfield',
name: 'field1',
fieldLabel:'Label Descr',
inputType: 'file',
width: 250,
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'My tooltip'
});
}
}
}






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 27 '18 at 13:48









Fabio BarrosFabio Barros

94929




94929













  • It gives error - TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 5:59











  • if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.

    – Fabio Barros
    Nov 28 '18 at 12:22











  • yes, its inside panel

    – Amita Patil
    Nov 28 '18 at 12:47











  • Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20

    – Fabio Barros
    Nov 28 '18 at 13:03











  • Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 14:04



















  • It gives error - TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 5:59











  • if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.

    – Fabio Barros
    Nov 28 '18 at 12:22











  • yes, its inside panel

    – Amita Patil
    Nov 28 '18 at 12:47











  • Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20

    – Fabio Barros
    Nov 28 '18 at 13:03











  • Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,

    – Amita Patil
    Nov 28 '18 at 14:04

















It gives error - TypeError: c.label is undefined target : c.label.dom,

– Amita Patil
Nov 28 '18 at 5:59





It gives error - TypeError: c.label is undefined target : c.label.dom,

– Amita Patil
Nov 28 '18 at 5:59













if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.

– Fabio Barros
Nov 28 '18 at 12:22





if i not mistaken,the 'textfield' must be inside a panel with 'form' layout to create the label.

– Fabio Barros
Nov 28 '18 at 12:22













yes, its inside panel

– Amita Patil
Nov 28 '18 at 12:47





yes, its inside panel

– Amita Patil
Nov 28 '18 at 12:47













Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20

– Fabio Barros
Nov 28 '18 at 13:03





Take a look at this fiddle, see if it helps: fiddle.sencha.com/#view/editor&fiddle/2o20

– Fabio Barros
Nov 28 '18 at 13:03













Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,

– Amita Patil
Nov 28 '18 at 14:04





Thank you sir, but it still gives same error, TypeError: c.label is undefined target : c.label.dom,

– Amita Patil
Nov 28 '18 at 14:04













1














Solution:



I'll answer exactly to your question - if you want to add a tooltip, you can use this:



Ext.onReady(function() {
Ext.QuickTips.init();

var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});

var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});

})


Notes:



Tested with ExtJS 3.4.



Config fieldLabel is only used when textfield is rendered by a container which has been configured to use the FormLayout layout manager.



One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.



You can see this fiddle.






share|improve this answer


























  • Thank you sir, I used your code. But still its not working

    – Amita Patil
    Nov 27 '18 at 10:45











  • @AmitaPatil I've updated the answer with working fiddle.

    – Zhorov
    Nov 27 '18 at 11:29











  • it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field

    – Amita Patil
    Nov 27 '18 at 11:47













  • @AmitaPatil See updated answer and fiddle. Thanks.

    – Zhorov
    Nov 29 '18 at 9:23











  • Hello sir, it works but it shows both tooltips on brows button

    – Amita Patil
    Nov 29 '18 at 13:01
















1














Solution:



I'll answer exactly to your question - if you want to add a tooltip, you can use this:



Ext.onReady(function() {
Ext.QuickTips.init();

var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});

var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});

})


Notes:



Tested with ExtJS 3.4.



Config fieldLabel is only used when textfield is rendered by a container which has been configured to use the FormLayout layout manager.



One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.



You can see this fiddle.






share|improve this answer


























  • Thank you sir, I used your code. But still its not working

    – Amita Patil
    Nov 27 '18 at 10:45











  • @AmitaPatil I've updated the answer with working fiddle.

    – Zhorov
    Nov 27 '18 at 11:29











  • it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field

    – Amita Patil
    Nov 27 '18 at 11:47













  • @AmitaPatil See updated answer and fiddle. Thanks.

    – Zhorov
    Nov 29 '18 at 9:23











  • Hello sir, it works but it shows both tooltips on brows button

    – Amita Patil
    Nov 29 '18 at 13:01














1












1








1







Solution:



I'll answer exactly to your question - if you want to add a tooltip, you can use this:



Ext.onReady(function() {
Ext.QuickTips.init();

var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});

var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});

})


Notes:



Tested with ExtJS 3.4.



Config fieldLabel is only used when textfield is rendered by a container which has been configured to use the FormLayout layout manager.



One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.



You can see this fiddle.






share|improve this answer















Solution:



I'll answer exactly to your question - if you want to add a tooltip, you can use this:



Ext.onReady(function() {
Ext.QuickTips.init();

var textFieldStreet = new Ext.form.TextField({
fieldLabel: 'My Field lable',
//renderTo: Ext.getBody(),
name: 'field1',
inputType: 'file',
listeners: {
render : function(c) {
new Ext.ToolTip({
target : c.label.dom,
html: 'Label tooltip'
});
new Ext.ToolTip({
target : c.getEl(),
html: 'Field tooltip'
});
}
}
});

var form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
items: [textFieldStreet]
});

})


Notes:



Tested with ExtJS 3.4.



Config fieldLabel is only used when textfield is rendered by a container which has been configured to use the FormLayout layout manager.



One disadvantage is the default "No file chosen" tooltip in Chrome and Mozilla.



You can see this fiddle.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 30 '18 at 8:36

























answered Nov 27 '18 at 9:50









ZhorovZhorov

3,9042518




3,9042518













  • Thank you sir, I used your code. But still its not working

    – Amita Patil
    Nov 27 '18 at 10:45











  • @AmitaPatil I've updated the answer with working fiddle.

    – Zhorov
    Nov 27 '18 at 11:29











  • it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field

    – Amita Patil
    Nov 27 '18 at 11:47













  • @AmitaPatil See updated answer and fiddle. Thanks.

    – Zhorov
    Nov 29 '18 at 9:23











  • Hello sir, it works but it shows both tooltips on brows button

    – Amita Patil
    Nov 29 '18 at 13:01



















  • Thank you sir, I used your code. But still its not working

    – Amita Patil
    Nov 27 '18 at 10:45











  • @AmitaPatil I've updated the answer with working fiddle.

    – Zhorov
    Nov 27 '18 at 11:29











  • it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field

    – Amita Patil
    Nov 27 '18 at 11:47













  • @AmitaPatil See updated answer and fiddle. Thanks.

    – Zhorov
    Nov 29 '18 at 9:23











  • Hello sir, it works but it shows both tooltips on brows button

    – Amita Patil
    Nov 29 '18 at 13:01

















Thank you sir, I used your code. But still its not working

– Amita Patil
Nov 27 '18 at 10:45





Thank you sir, I used your code. But still its not working

– Amita Patil
Nov 27 '18 at 10:45













@AmitaPatil I've updated the answer with working fiddle.

– Zhorov
Nov 27 '18 at 11:29





@AmitaPatil I've updated the answer with working fiddle.

– Zhorov
Nov 27 '18 at 11:29













it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field

– Amita Patil
Nov 27 '18 at 11:47







it adds fieldLabel: 'fieldLabel' 3 times, and hides brows button and fileName field

– Amita Patil
Nov 27 '18 at 11:47















@AmitaPatil See updated answer and fiddle. Thanks.

– Zhorov
Nov 29 '18 at 9:23





@AmitaPatil See updated answer and fiddle. Thanks.

– Zhorov
Nov 29 '18 at 9:23













Hello sir, it works but it shows both tooltips on brows button

– Amita Patil
Nov 29 '18 at 13:01





Hello sir, it works but it shows both tooltips on brows button

– Amita Patil
Nov 29 '18 at 13:01


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53493929%2fhow-to-set-tooltip-to-ext-form-textfield-where-input-type-is-file%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

Calculate evaluation metrics using cross_val_predict sklearn

Insert data from modal to MySQL (multiple modal on website)