PDA

View Full Version : Unable to display tooltip



marc123
17 Dec 2012, 2:33 AM
Hello,

I am unable to display a tooltip on a displayfield.

Here's my code:



application.view.dossier_PortXCSFieldsMapping = new Ext.Panel({
anchor: '100% 50%',
height: 280,
items: [{
layout: 'column',
padding: 5,
align: 'left',
columnWidth: '0.2',
items: [
application.view.PortXCSColumn1
]
}]
})


item application.view.PortXCSColumn1 is below:



application.view.PortXCSColumn1={
title: 'Column1',
id: 'PortXCSColumn1',
layout: 'form',
columnWidth: .25,
defaults: {
xtype: 'displayfield',
labelWidth: 'auto',
fieldClass: 'fieldsScreenFieldCls'
},
items: [{
id: 'field_UCRN',
fieldLabel: 'CRN'
},{
xtype: 'tooltip',
autoShow: true,
title: 'tip:',
target: 'field_UCRN',
html: 'Op basis van dit gegeven kan de visit (en bijbehorende gegevens) worden opgezocht in PortXcs '
},{
...


When hovering over the displayfield (field_UCRN) nothing happens. I expect a tooltip to show with the text as specified in html config of element xtype: 'tooltip'.
If I inspect the rendered page with Firebug I see an element with class 'x-tip' which contains the tooltip's html, but it is hidden and stays hidden when hovering over the target element. Do I have to require a custom Ext library? What am I doing wrong here?

Thanks,

Marc

mitchellsimoens
19 Dec 2012, 8:19 AM
Tooltip shouldn't be a child item. I personally would edit an element in the display field to have the ext:qtitle and ext:qtip attribs and let Ext.QuickTips handle showing/hiding the tip.