View Full Version : Tooltip rendering problem (IE)

23 Oct 2010, 12:19 AM

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:

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/showthread.php?55690-Tooltip-to-quot-capture-quot-the-target-element-which-triggered-it-s-showing.&p=265259#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 ?

23 Oct 2010, 1:32 AM
I don't think you need autoWidth: true

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

23 Oct 2010, 1:47 AM
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:

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.

23 Oct 2010, 1:51 AM
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.

23 Oct 2010, 1:52 AM
Hmm... no, the built-in minWidth is 40... which I would say is not sensible!

24 Oct 2010, 12:43 AM
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).


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.


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

24 Oct 2010, 12:46 AM
You need to put this in your overrides file:

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

24 Oct 2010, 2:31 AM
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.

24 Oct 2010, 2:41 AM
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?

24 Oct 2010, 2:47 AM
It's automatic width would be 300.

24 Oct 2010, 3:18 AM
By reading your mind?

24 Oct 2010, 7:13 AM
when i look to your screenshots it looks like a conflicting css rule of your custom css. Just try to deactivate it.

24 Oct 2010, 10:14 PM
Disabling my custom css doesn't change a thing.

24 Oct 2010, 11:31 PM
What version of Ext is this?

24 Oct 2010, 11:32 PM
I am using 3.3 Final release. Also tried 3.2.1 but it looks the same in IE.

24 Oct 2010, 11:37 PM
I do not get that effect. I don't know what could be wrong.


25 Oct 2010, 12:15 AM
Problem seems to be with my OS.
- I normally use Windows XP with Service Pack 3, and then it all looks kinda sloppy.
- I just ran my application on my laptop which has Windows 7 Home Premium and I got no problems.

I used IE8 on both the systems, but can my OS be the cause of this ?

25 Oct 2010, 10:07 AM
Anyway, I did some debugging and noticed some strange behaviour. I stripped out all the overrides, unnecesarry code etc.
The beforeshow event is executed twice, this is my code:


var grid = new Ext.grid.GridPanel({
renderTo : Ext.getBody(),
listeners : {render : showToolTip},
// Rest of config...

function showToolTip(grid){
grid.tip = new Ext.ToolTip({
target : grid.getView().mainBody,
delegate : '.x-grid3-row',
renderTo : document.body,
autoHide : false,
anchor : 'left', // Comment out this line to fire the event only once
maxWidth : 500,
listeners : {
beforeshow : function(tip){ // Set breakpoint here
tip.body.update('Over row ## ??');
When I hover over a row with my mouse, it comes twice at my breakpoint. In this case you wouldn't notice much of it. Commenting out the line where I set the anchor does solve this. I this logical ??

25 Oct 2010, 10:42 AM
It does get shown twice because of the anchor positioning. It shows it, then does some calculations and calls showAt again.

show : function(){
// pre-show it off screen so that the el will have dimensions
// for positioning calcs when getting xy next
this.origConstrainPosition = this.constrainPosition;
this.constrainPosition = false;
this.anchor = this.origAnchor;

this.constrainPosition = this.origConstrainPosition;

I think this is a bug really. The "pre show" should not call the real show method, but just show the element and position it at [-1000, -1000]

21 Dec 2012, 2:39 AM
After some investigation (having the same issue myself) the original problem appears to be because IE was using Quirks Mode.

Tooltips should render properly if the document starts with "<!DOCTYPE html>", forcing Strict Mode.

You may also need to disable Compatibility Mode, which is achived by adding an HTTP header (or http-equiv meta tag) "X-UA-Compatible: IE=edge". Doing this also overrides any doctype-based choice of render mode.

18 Apr 2013, 9:54 AM
This issue has been around since IE 6 and 7 and appears in IE8 and 9. I found a solution in a small script found somewhere on the net. It would seem that IE needs to be told not to display "title" and use of a secondary javascript/Jquery tool tip will display correctly with only one tooltip/title bubble. the code is;

<!--[if IE]><script>for(i =0;i<document.images.length;i++){document.images[i].title='';}</script><![endif]-->

The original code I had found only had for the "alt" to be empty. This did not work as IE still rendered the title two times. I changed "alt" to "title" in this code and bingo. Put this snipet in the botom or top of your page.