PDA

View Full Version : [OPEN-1244] Tooltip wrong align



vladsch
30 Aug 2010, 2:51 AM
Hi,

It seems that tooltips cannot align correctly if the widget near browser edge
Here is test sample (ExtJS 3.3.0)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tooltips seemingly without auto edge detection</title>
<style type="text/css">
body { font:9pt/1.68 verdana, sans-serif; padding:1em; }
p { padding-top:1em; }
</style>

<!-- Place here ExtJS toolkit resources -->

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
new Ext.Viewport({
id: "ViewPort1",
items: {
id: "Panel1",
bbar: {
id: "BottomBarToolBar1",
xtype: "toolbar",
items: [{
id: "Button1",
text: "Tooltip should render above this button"
},
{
xtype: "tbfill"
},
{
id: "Button2",
text: "Tooltip should render above and to left of button"
}]
},
tbar: {
id: "Toolbar1",
xtype: "toolbar",
items: [{
id: "Button3",
text: "This one is fine"
},
{
xtype: "tbfill"
},
{
id: "Button4",
text: "This should show tooltip to left"
}]
},
contentEl: "Panel1_Content"
},
layout: "fit"
});
new Ext.ToolTip({
id: "Tooltip3",
width: 200,
title: "Tooltip Title",
contentEl: "Tooltip3_Content",
target: "Button3"
});
new Ext.ToolTip({
id: "Tooltip4",
width: 200,
title: "Tooltip Title",
contentEl: "Tooltip4_Content",
constrainPosition: true,
target: "Button4"
});
new Ext.ToolTip({
id: "Tooltip1",
width: 200,
title: "Tooltip Title",
contentEl: "Tooltip1_Content",
constrainPosition: true,
target: "Button1"
});
new Ext.ToolTip({
id: "Tooltip2",
width: 200,
title: "Tooltip Title",
contentEl: "Tooltip2_Content",
constrainPosition: true,
target: "Button2"
});
});
</script>
</head>
<body>
<div id="Tooltip3_Content" class="x-hidden">
<p>Tooltip content shows up normally</p>
</div>

<div id="Tooltip4_Content" class="x-hidden">
<p>This tooltip will get shown on the right and get cut off. It should automatically show on the left but doesn't.</p>
</div>

<div id="Tooltip1_Content" class="x-hidden">
<p>Tooltip content goes here and should automatically appear above button, not covering it</p>
</div>

<div id="Tooltip2_Content" class="x-hidden">
<p>Tooltip content goes here and should automatically appear above button (not covering it) and to the left of the window</p>
</div>

<div id="Panel1_Content" class="x-hidden">
<p>It looks like in ExtJS 3.3.0, you need constrainPosition : true on the tooltips</p>
<p>In ExtJS 2.3.0, you didn't need to put that and it would correctly constrain.</p>
<p>However, problem still remains that tooltips in the bottom bar, although now visible, cover their buttons, possibly because they are still being offset from the bottom of the button, not top.</p>
</div>
</body>
</html>


P.S. Also the tooltip's anchor is lost on second tooltip showing (if set anchorToTarget="false" and achor)

Jamie Avins
30 Aug 2010, 9:29 AM
Thank you for the report.

anupkshah
6 Sep 2010, 7:23 AM
Hi,

Just wondering if there's any update for this?

Thanks!

farmalay
14 Oct 2010, 1:03 PM
Even if the constrainPosition is set to true, the tooltip is positioned off screen if trackMouse is also set to true. To fix it I changed Tooltip.onMouseMove as follows (changes are in bold):




Ext.override(Ext.ToolTip, {

onMouseMove : function(e){
var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
if (t) {
this.targetXY = e.getXY();
if (t === this.triggerElement) {
if(!this.hidden && this.trackMouse){
var xy = this.getTargetXY();
if(this.constrainPosition){
xy = this.el.adjustForConstraints(xy);
}

this.setPagePosition(xy);
}
} else {
this.hide();
this.lastActive = new Date(0);
this.onTargetOver(e);
}
} else if (!this.closable && this.isVisible()) {
this.hide();
}
}
});