1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Location
    The Netherlands
    Posts
    93
    Vote Rating
    0
    rkaat is on a distinguished road

      0  

    Default Tooltip rendering problem (IE)

    Tooltip rendering problem (IE)


    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):
    Code:
    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 ?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I don't think you need autoWidth: true

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

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2010
    Location
    The Netherlands
    Posts
    93
    Vote Rating
    0
    rkaat is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  6. #6
    Ext JS Premium Member
    Join Date
    Aug 2010
    Location
    The Netherlands
    Posts
    93
    Vote Rating
    0
    rkaat is on a distinguished road

      0  

    Default


    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.
    Last edited by rkaat; 24 Oct 2010 at 12:47 AM. Reason: Add image

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You need to put this in your overrides file:

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

  8. #8
    Ext JS Premium Member
    Join Date
    Aug 2010
    Location
    The Netherlands
    Posts
    93
    Vote Rating
    0
    rkaat is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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?

  10. #10
    Ext JS Premium Member
    Join Date
    Aug 2010
    Location
    The Netherlands
    Posts
    93
    Vote Rating
    0
    rkaat is on a distinguished road

      0  

    Default


    It's automatic width would be 300.

Similar Threads

  1. ToolTip problem
    By mcadirci in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 13 Sep 2010, 12:15 AM
  2. [FIXED-571] row editor grid - tooltip rendering
    By fugo in forum Ext 3.x: Bugs
    Replies: 12
    Last Post: 15 Feb 2010, 3:08 AM
  3. Hi tooltip problem
    By sseema in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 3 Dec 2008, 5:55 AM
  4. ToolTip Problem
    By Trollo in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 26 Aug 2008, 5:50 AM

Thread Participants: 4

Tags for this Thread