PDA

View Full Version : Ext.Tooltip on absolute positioned DOM objects - wrong location



keithhackworth
22 Nov 2013, 6:43 AM
Ext version tested:

Ext 4.2.1

Browser versions tested against:

IE9
FF 25.0.1

DOCTYPE tested against:

None specified

Description:

An absolute positioned object is added to the page using javascript's document.body.appendChild() function. A tooltip is created on the object using the tooltip's target parameter. Mouse over the object, the tooltip shows up at the bottom of the HTML page, not positioned near the object.
I tried the adjustPosition patch used on ticket http://www.sencha.com/forum/showthread.php?121701, but it doesn't help. I know I can pass it the absolute position for the tooltip, but I shouldn't have to do that.

Steps to reproduce the problem:

create a new HTML document using the code below. Mouse over the word 'test' in the example below. The tooltip shows up at the bottom of the page. Results get stranger if your window is smaller than the page (so you have to scroll around the page). If you're lucky, sometimes it appears near the test object, depending on the size of your window.

The result that was expected:

I expect to the see the tooltip somewhere near the target object. I would expect the tooltip to get the target's position on the page and appear the tooltip near that object. The absoulte position shouldn't throw it off.

The result that occurs instead:

The tooltip is appearing in the same place as if you did a document.write('Tooltip text') - it appears at the bottom of the page. I moused over the "testing" on this screen capture. My tooltip (simple test) appears at the bottom.

46963

Example code:


<html><head>
<script type="text/javascript" src="http://docs.sencha.com/extjs/4.2.1/extjs/ext-all.js"></script>
<script>
Ext.tip.QuickTipManager.init();
Ext.ToolTip.override({

adjustPosition : function(x, y){
if(this.constrainPosition){
var ay = this.targetXY[1], h = this.getSize().height;
if(y <= ay && (y+h) >= ay){
y = ay-h-5;
}
}
return {x : x, y: y};
}

});
function doit() {
test = document.createElement('div');
test.innerHTML = 'testing';
test.id = 'test';
test.style.position='absolute';
test.style.top=300;
test.style.left=200;
document.body.appendChild(test);
tt = Ext.create('Ext.tip.ToolTip', {
target: document.getElementById('test'),
trackMouse: true,
html: 'simple test'
});
}

</script></head><body onload='doit();'>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body></html>

LesJ
22 Nov 2013, 7:13 AM
Duplicate?

http://www.sencha.com/forum/showthread.php?270833-Firefox-left-alignment-is-not-good-on-label-with-absolute-position

keithhackworth
22 Nov 2013, 7:19 AM
This seems a bit different than that issue. In this case, it's getting the position totally wrong - it's not a left only issue. In addition, I can duplicate it in IE and FF, so it's not a FF issue.

Gary Schlosberg
28 Nov 2013, 1:49 PM
I'm not able to reproduce this issue. In all browsers I tried, the tip appears reasonably close to the target object, just below and to the right, but certainly not how it appears in your image. In which operating system are you seeing this issue?