sacha
19 May 2010, 3:26 AM
Using ExtJS 3.2.1 and FF 3.6, I had an odd problem with ToolTips on a form. ToolTips are added to each form element as follows:
new Ext.ToolTip({
target: 'caf-panel-div', // div containing form
delegate: '#'+fitem.id, // individual form item
html: 'help me',
autoHide: true,
anchor: 'left'
});The problem was that for items at the top of the form, the tooltip appeared to the right of the item as expected, but for items lower down the form, the tooltip appeared at the top of the item, as shown in this screenshot:
20571
I traced this to a bug in the ToolTip code; I had to scroll the page down to see the lower form items, but the tooltip positioning code doesn't seem to take account of scrolling in all cases. The following change to getTargetXY fixed it:
< if(axy[1]+sz.height > dh){
---
> if(axy[1]+sz.height > dh+scrollY){
I expect the same applies to the width check, but I don't have a test case so I haven't checked.
I had a look in IE8, and my fix works there too.
new Ext.ToolTip({
target: 'caf-panel-div', // div containing form
delegate: '#'+fitem.id, // individual form item
html: 'help me',
autoHide: true,
anchor: 'left'
});The problem was that for items at the top of the form, the tooltip appeared to the right of the item as expected, but for items lower down the form, the tooltip appeared at the top of the item, as shown in this screenshot:
20571
I traced this to a bug in the ToolTip code; I had to scroll the page down to see the lower form items, but the tooltip positioning code doesn't seem to take account of scrolling in all cases. The following change to getTargetXY fixed it:
< if(axy[1]+sz.height > dh){
---
> if(axy[1]+sz.height > dh+scrollY){
I expect the same applies to the width check, but I don't have a test case so I haven't checked.
I had a look in IE8, and my fix works there too.