PDA

View Full Version : Tooltip creates scrollbars



Dumas
2 Mar 2010, 7:23 PM
Hi!

I have the problem that a onmouseover tooltip creates a horizontal and a vertical scrollbar, and because of that the page get's smaller, the mouse is not over the icon anymore and the tooltip goes any, the the mouse is over the icon again and ....

If this was a bit unclear, here's the general problem: http://screencast.com/t/ODM5ZmYz

So how can I solve this?
Can I e.g. say create the tooltip inside the view? Or just allways create a specific tooltips to the left?

thx
Roland

rakesur
19 Apr 2010, 9:24 PM
Hi,

I am facing the same issue. Can any one give me any clue on this.

Thanks in advance.

Animal
19 Apr 2010, 11:27 PM
The element that is being overflowed should be overflow:hidden

steffenk
19 Apr 2010, 11:35 PM
but better would be the tooltip should respect container limits :)

rakesur
23 Apr 2010, 6:20 AM
Hi Animal,

Thanks for your reply.

Overflowed element is HTML body tag.
html, body {
overflow:auto;
}
My application is supporting 1280 * 1024 resolution and wants horizontal scroll bar for lower resolution. If i used "overflow:hidden" in above css then scrolling on qtip is resolved but it creates another one.

Thanks

rakesur
25 Apr 2010, 9:47 PM
Hi,

Please let me know if you want more detail on this.

Thanks

rakesur
27 Apr 2010, 10:04 PM
hi,

I tried this and it seems to be fixed for me.


Ext.override(Ext.Tip, {
showAt : function(xy){
Ext.Tip.superclass.show.call(this);
if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
this.doAutoWidth();
}
if(this.constrainPosition){
xy = this.el.adjustForConstraints(xy);
}

var elWidth = parseInt(this.el.dom.style.width);
var xPosition = xy[0] + elWidth;

if(xPosition > 1270) {
xy[0] = 1270 - elWidth;
}

this.setPagePosition(xy[0], xy[1]);
}
});


Thanks

gonzman
2 Jun 2010, 9:25 AM
Hi,

works perfectly. For different window sizes you may replace "1270" with something like "Ext.getBody().getComputedWidth()"

Heiko

rakesur
8 Jun 2010, 2:17 AM
Hi gonzman,

Yes you can use this for different window size.

I just wana to share one more case with you.. assume you scroll the web page little bit where grid header is on bottom of the page. Now if you move the cursor to see grid-header tool tip, the scroll bar will appear again. To fix this i used this code.



Ext.override(Ext.Tip, {
showAt : function(xy){
Ext.Tip.superclass.show.call(this);
if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
this.doAutoWidth();
}
if(this.constrainPosition){
xy = this.el.adjustForConstraints(xy);
}

var elWidth = parseInt(this.el.dom.style.width);
var xPosition = xy[0] + elWidth;

if(xPosition > 1270) {
xy[0] = 1270 - elWidth;
}

var bHeight = Ext.lib.Dom.getViewHeight()
if((xy[1] + 50 )> bHeight) {
xy[1] = bHeight - 50;
}

this.setPagePosition(xy[0], xy[1]);
}
});