PDA

View Full Version : How to make a tooltip for text item in toolbar?



voronov
24 Aug 2011, 6:25 PM
Hello,

Can anyone help me understand why text items in toolbar (xtype tbtext') don't care about tooltip field? Normal buttons do. So how can I attach a tooltip to a text item in toolbar?

Thanks,
Yury

navvn
24 Aug 2011, 10:59 PM
name should look like:

<span data-qtip="your tooltip">text</span>

voronov
25 Aug 2011, 7:18 AM
It does not work too. Sorry.

raz0r1
25 Aug 2011, 12:17 PM
try using
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.TextItem-cfg-tpl
(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.TextItem-cfg-tpl)with
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.XTemplate

y (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.XTemplate)ou also have to call



Ext.QuickTips.init();
on time in your application

(without code example its hard to help you)

voronov
25 Aug 2011, 1:37 PM
Code is simple:


var tbar = [];
tbar.push(
{xtype:'tbtext', text: "Some Zoom", tooltip: 'Some Tooltip' },
{iconCls:'zoom_minus', tooltip:'Zoom Out', scope:this, handler:function() { this.m_ZoomOP = 'button'; this.zoomOut();}},
{iconCls:'zoom_plus', tooltip:'Zoom In', scope:this, handler:function() { this.m_ZoomOP = 'button'; this.zoomIn();}}
);

This 'tbar' is used when panel is created.

The last two elements are buttons, and they have tooltips. The first element is text and no tooltip appeared.

skirtle
28 Aug 2011, 11:31 PM
Can you confirm that you are using ExtJS 4?

The following works for me:


Ext.tip.QuickTipManager.init();

Ext.create('Ext.panel.Panel', {
height: 300,
renderTo: Ext.getBody(),
width: 300,
tbar: [{
text: '<span data-qtip="Hello">Text</span>',
tooltip: 'Hello',
xtype: 'tbtext'
}]
});

voronov
29 Aug 2011, 5:07 AM
Nope. We are still using 3.x. Is it known bug for that version?

skirtle
29 Aug 2011, 11:27 AM
This is an ExtJS 4 forum. Please post in the right forum in future, it'll save people wasting time giving you advice for the wrong version.

In ExtJS 3 it'd be this:


Ext.QuickTips.init();

new Ext.Panel({
height: 300,
renderTo: Ext.getBody(),
width: 300,
tbar: [{
text: '<span ext:qtip="Hello">Text</span>',
tooltip: 'Hello',
xtype: 'tbtext'
}]
});

voronov
30 Aug 2011, 8:35 AM
Oops! Sorry for misplacement. Thanks for advice, though :)