PDA

View Full Version : [OPEN] Trigger tooltip



Zdeno
6 Jun 2014, 3:48 PM
Is possible add tooltip to trigger? Didnt find any mention in the docs.

jsakalos
7 Jun 2014, 2:34 AM
Yes, it is. Generally, you can add a tooltip (or quicktip) to any DOM element. In this case, you would use triggerEl (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Trigger-property-triggerEl) property of trigger field.

Zdeno
7 Jun 2014, 5:21 AM
Cheers Saki, thanks for tip. However there is only el in ExtJS 5. Simple example with data tip could look like this:

Ext.create('Ext.form.field.Text', {
renderTo: Ext.getBody(),
fieldLabel: 'My Custom Field',
triggers: {
foo: {
cls: 'my-foo-trigger',
handler: function() {
console.log('foo trigger clicked');
}
}
},
listeners: {
render: function () {
var triggerEl = this.getTrigger('foo').el;
triggerEl.dom.setAttribute('data-qtip', 'foo trigger tooltip');
}
}
});

or you could create custom text component with tooltip triggers.

jsakalos
7 Jun 2014, 2:20 PM
I still can find triggerEl in 5.0. Try to:

navigate to http://dev.sencha.com/ext/5.0.0/examples/kitchensink/#form-combos
in console type:


Ext.ComponentQuery.query('combo')[0].triggerEl.set({'data-qtip':'Hello World'})

The first combo gets the tooltip.

However, this seems cleaner to me:


Ext.ComponentQuery.query('combo')[0].getTrigger('picker').getEl().set({'data-qtip':'Hello Mars'})

Zdeno
7 Jun 2014, 2:34 PM
The best would be add tooltip support to core :) Now I need to create another override because those functionality missing. Aye the example with
getTrigger('picker').getEl() is cleaner because who knows how long they will keep triggerEl inside. Currently when you compare 5.0 and 4.2 docs in 5.0 it is undocumented property. Anyway your idea with triggerEl led me to the result I expected :)

Phil Guerrant
10 Jun 2014, 7:51 AM
Opened a ticket for this so we can implement tooltip support on triggers in the framework.

jsakalos
10 Jun 2014, 10:14 AM
Super! Thanks Phil.

Lukappa
24 Feb 2015, 2:20 AM
In the meantime you could use this solution as global fix:



Ext.define('App.bugfix.form.trigger.Trigger', {

override: 'Ext.form.trigger.Trigger',

//compatibility: '5.1.1.151',


afterFieldRender: function() {
this.callParent(arguments);


var me = this;
if(me.tooltip) {
me.el.dom.setAttribute('data-qtip', me.tooltip);
}
},




}, function() {
if(Ext.getVersion().version != '5.1.1.151')
console.warn('[EXTJS PATCH] App.bugfix.form.trigger.Trigger. CHECK IF THIS FEATURE HAS BEEN RELEASED: http://www.sencha.com/forum/showthread.php?286653');
});





So you can use "tooltip" as param of your trigger:



search : {
tooltip: 'Search',
cls: 'x-form-search-trigger',
handler: function() {
}
},