PDA

View Full Version : Logic of moving around tootip when there is not enough space is not entirely correct



samsuo
10 Jan 2012, 3:48 PM
- Detailed description of the problem
Method "getTargetXY(int targetCounter)" in "com.extjs.gxt.ui.client.widget.tips.ToolTip" is used to move tootip around target component when there is not enough space to display the tooltip but the logic is not entirely correct and does not handle all possiible cases.
on line 481:

if (!((toolTipConfig.getAnchor().equals("top") && (sz.height + offsets[1] + scrollY < dh - r.bottom))
|| (toolTipConfig.getAnchor().equals("right") && (sz.width + offsets[0] + scrollX < r.left))
|| (toolTipConfig.getAnchor().equals("bottom") && (sz.height + offsets[1] + scrollY < r.top)) || (toolTipConfig.getAnchor().equals(
"left") && (sz.width + offsets[0] + scrollX < dw - r.right)))

if there is not enough space to display the tootip based on original anchor position, code will goes in above if loop. There are 4 consecutive if loops that are used to move the tootip to a new direction that has enough space.

if (sz.width + offsets[0] + scrollX < dw - r.right) {
toolTipConfig.setAnchor("left");
return getTargetXY(targetCounter);
}
if (sz.width + offsets[0] + scrollX < r.left) {
toolTipConfig.setAnchor("right");
return getTargetXY(targetCounter);
}
if (sz.height + offsets[1] + scrollY < dh - r.bottom) {
toolTipConfig.setAnchor("top");
return getTargetXY(targetCounter);
}
if (sz.height + offsets[1] + scrollY < r.top) {
toolTipConfig.setAnchor("bottom");
return getTargetXY(targetCounter);
}

The problem is that those if conditions only do one dimension check. For example, as long as there is enough space width wise at the left side of the target component, the code will just move the tootip to the left of the target but the left side of the target may not have enough space height wise to display the whole tootip.

One scenario of the problem is as follows:

1. the original anchor position is set to "top" to display the tooltip below target component
2. If there is not enough space height wise below the target to display the whole tootip the tooltip will be moved to left or right of the target component if there is enough space horizontally to display the tootip. This is true even if there is not enough space vertically to display the whole tootip. The correct behaviour shoule be moving the tootip to above the target where there is enough space to display the tootip height AND widgth wise.

- Possible solution
In above 4 if loop conditions, check both horizontal and vertical direction to make sure the new location have enough space both width wise and height wise to dipslay the whole tootip

- GXT version
2.2.4

- Host mode / web mode / both
Both

-Browser and version
FieFox 3, 7 and 8

- Operating System
WinXP and Ubuntu