Hybrid View

  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,506
    Vote Rating
    54
    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,506
    Vote Rating
    54
    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,506
    Vote Rating
    54
    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,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What version of Ext is this?

  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


    I am using 3.3 Final release. Also tried 3.2.1 but it looks the same in IE.

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

      0  

    Default


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


  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


    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 ?

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