Tooltip rendering problem (IE)

**Animal** · 24 Oct 2010 3:18 AM

By reading your mind?

**steffenk** · 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.

**rkaat** · 24 Oct 2010 10:14 PM

Disabling my custom css doesn't change a thing.

**Animal** · 24 Oct 2010 11:31 PM

What version of Ext is this?

**rkaat** · 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.

**Animal** · 24 Oct 2010 11:37 PM

I do not get that effect. I don't know what could be wrong.

**rkaat** · 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 ?

**rkaat** · 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:

Code:

Ext.onReady(function(){    
    Ext.QuickTips.init();
    
    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 ??

**Animal** · 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.

Code:

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

        if(this.anchor){
            this.anchorEl.show();
            this.syncAnchor();
            this.constrainPosition = this.origConstrainPosition;
        }else{
            this.anchorEl.hide();
        }
    },

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]

**OrangeDog** · 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.

Tooltip rendering problem (IE)

Thread Tools

Search Thread

Display

Similar Threads

ToolTip problem

[FIXED-571] row editor grid - tooltip rendering

Hi tooltip problem

ToolTip Problem

Tags for this Thread