Tooltip rendering problem (IE)

[rkaat]

Hey,

I was having some difficulties with rendering my tooltip in IE8. The tooltip works great in FF and Chrome, but not in Internet Explorer.
The problem is clearly shown in the image below:
tooltip.JPG

The code I use to make the tooltip is (got it from another thread on the forum):

function showToolTip(grid){
        grid.tip = new Ext.ToolTip({
            target      : grid.getView().mainBody,
            delegate    : '.x-grid3-cell',
            renderTo    : document.body,
            autoWidth   : true,
            listeners   : { beforeshow : function(){
                   // Get data to show in tooltip
            }}
       });
}

The thread where I got this code from is: http://www.sencha.com/forum/showthre...259#post265259
It is quite an old post, so I might be not compatible anymore. Is this a internet explorer related problem or am I doing something wrong in my code ?

[Animal]

I don't think you need autoWidth: true

Ext.Tip has its own widthing strategy based upon a predefined (but configurable) minWidth and maxWidth

[rkaat]

Thx for the reply Animal,

I removed autoWidth : true and got it almost working now. When I refresh my page and hover over a cell the tooltip renders wrong. This only happens the first time, cause when I hover my mouse over a cell the second time, it works like expected.

Here is a image of how it looks when hovering over a cell for the 1st time:
tooltip2.JPG

It looks like it is placing a break after every word. Beside that I also see an empty space at top of the tooltip, which is only showing in IE, not in FF and Chrome.
I am thinking that it is a header for the title. So I added header : false, to the tooltip with no result. I am continuing with testing to see if I can fix the problem.

[Animal]

Configure it with a minWidth. (Actually, it should already have a sensible minWidth, so there could be a problem with that mechanism)

Or use non breaking spaces in any text which must not be broke which defines the width of your content.

[Animal]

Hmm... no, the built-in minWidth is 40... which I would say is not sensible!

[rkaat]

Ok, I discovered some strange behaviour in the tooltips.
Also the standard tooltips I get with Ext.QuickTips.init(); ain't perfect (see picture below).

tooltip3.JPG

When I hover my mouse over the 'First page button' in a pagingtoolbar I get the above tooltip. Again, this only happens in IE, not in FF and Chrome. I am starting to think, that I didn't install some plug-in for IE that causes this, and that it's not an ExtJS problem.

layout.JPG

In the above picture, you can clearly see the difference between the browsers. It all looks kinda sloppy in IE.

[Animal]

You need to put this in your overrides file:

Ext.Tip.prototype.minWidth = 300;  // Or whatever you would like the minWidth to be

[rkaat]

Setting the minWidth does solve problem, but isn't the problem a bug from Ext in IE ?? In my opinion, autoWidth : true should work correct like in FF and Chrome.

In my opinion a tooltip should change it's width to the content in it. Setting the minWidth is like a quick fix. The content in my tooltip is changing constant, based on what cell my mouse is. Setting a minWidth to like 200, means I sometimes have a x number of pixels (at the right) of empty tooltip.

[Animal]

What would its content width be though?

Say you had a long paragraph of help text. Several hundred words. What would its "automatic" width be?

[rkaat]

It's automatic width would be 300.