[FIXED][3.0] Tooltip.js anchorEl is taking up space

[stever]

The tooltip div now has a anchorEl div that is added to the body, and takes up space even when hidden since visibility:hidden divs still take space (as opposed to display:none divs). It could use display:none, or it could use offsets and be positioned absolutely. I propose display:none simply because it is an easy fix.

Original:

onRender : function(ct, position){
Ext.ToolTip.superclass.onRender.call(this, ct, position);
this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();
this.anchorEl = ct.createChild({
cls: 'x-tip-anchor ' + this.anchorCls
});
}

Proposed:

onRender : function(ct, position){
Ext.ToolTip.superclass.onRender.call(this, ct, position);
this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();
this.anchorEl = ct.createChild({
cls: 'x-tip-anchor ' + this.anchorCls
});
this.anchorEl.setVisibilityMode(Ext.Element.DISPLAY);
}

[evant]

Fixed in SVN.

[stever]

I guess the fix had a side effect of some sort? r3648 says "the anchor floats anyway" -- floating still takes space. Now if you were to absolutely position it, then that would be another story.

The screenshot shows how now our page has a scrollbar and extra space at the bottom, both are fixed when that extra line is there. It could be hidden some other way too, just that way was easy.

[stever]

Oh, I see what you mean by floating:


floating:{shadow:true,shim:true,useDisplay:true,constrain:false},

Note the useDisplay is true. The thing is, the anchor is not in the DOM as a child of the component's element -- it is a sibling (use firebug and look at the DOM). So it does not get any of those settings.

[evant]

Modified it so the anchor is now a child element of the tooltip, seems to work fine.