PDA

View Full Version : Button tooltip



Bokara
14 Oct 2011, 3:01 AM
This is my code:



dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: [{
xtype: 'button',
tooltipType: 'title',
tooltip : "tooltip!",
text : '<b><font color = "#0004FF">2007. god.</font></b>',
listeners: {
click: function () {
ClearMap(IJ, BM, MJESTO, '2007');
},
mouseover: function () {
this.setText('<b><font color = "#E53A3A">2007. god.</font></b>');
},
mouseout: function () {
this.setText('<b><font color = "#0004FF">2007. god.</font></b>');
}
}
}
}]


The tooltip is not working. Please help. Thanks!

skirtle
14 Oct 2011, 6:26 AM
I suspect the extra tags in your text are getting in the way. Have you tried using CSS instead?

Bokara
14 Oct 2011, 7:13 AM
You think to move this <b> and color to the css?

skirtle
14 Oct 2011, 8:47 AM
Exactly. Just try removing the tags first, see if that fixes the tooltip issue. If it does, add the styling logic into your CSS instead. It belongs there anyway.

Bokara
14 Oct 2011, 8:52 AM
Hi, it is not that. I removed the tags from text and it still does not working.



dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: [{
xtype: 'button',
tooltipType: 'title',
tooltip : "tooltip!",
text : '2007. god.',
listeners: {
click: function () {
ClearMap(IJ, BM, MJESTO, '2007');
},
mouseover: function () {
this.setText('2007. god.');
},
mouseout: function () {
this.setText('2007. god.');
}
}
}
}]

skirtle
14 Oct 2011, 9:10 AM
What ExtJS version are you using? There was a bug (EXTJSIV-2510), fixed in 4.0.4:

http://docs.sencha.com/ext-js/4-0/extjs/release-notes.html

From testing with 4.0.2 and 4.0.6 I can confirm that your code doesn't work with 4.0.2 but it's fine with 4.0.6.

Bokara
14 Oct 2011, 9:27 AM
Thanks for checking that out!
I am using the last available version to me and that is 4.0.2a
Thanks anyway. I will try to override the bug somehow.
I hope that there is the solution without upgrade to the 4.0.6.

skirtle
14 Oct 2011, 9:40 AM
I wouldn't bother trying to fix it, 4.0.7 is due out imminently and it's being released to everyone, not just subscribers:

http://www.sencha.com/blog/ext-js-4-1-update/

If you still want to fix it yourself, it should just be a case of adding a title attribute to the underlying button element.

Bokara
14 Oct 2011, 9:54 AM
I don't understand what do you think.
There is no title attribute for the button.

skirtle
14 Oct 2011, 10:13 AM
I don't understand what do you think.
There is no title attribute for the button.

You need to add it to the button element, not the button. Something like:


button.btnEl.set({title: 'tooltip!'});

Bokara
15 Oct 2011, 1:38 AM
Sorry but don't know how to do that.
Can you tell me the exact code and where to put it?
Thanks...

skirtle
15 Oct 2011, 8:29 AM
There are several options. Here's one.


{
xtype: 'button',
...
listeners: {
afterrender: function(button) {
button.btnEl.set({title: button.tooltip});
},
...
}
}

Bokara
15 Oct 2011, 3:24 PM
Thanks skirtle! You helped me a lot!
This is works fine!