1. #1
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    7
    Vote Rating
    7
    elee2002 is on a distinguished road

      6  

    Default Tooltips on forms and grid are not resizing to the size of the text

    Tooltips on forms and grid are not resizing to the size of the text


    On the forms, the 'The field is required' message is not fully visible. The tooltip size is too small. See example in http://docs.sencha.com/ext-js/4-2/#!/example/form/dynamic.html

    We also have tooltips on our column headers and the size of the text too large for the tooltip. In 4.1.3, the size of the tooltip resizes to size of the tooltip text.

  2. #2
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    119
    Vote Rating
    4
    john76543 is an unknown quantity at this point

      1  

    Default


    Sencha, this is a serious problem, tooltips in 4.2.0 are painful. Eg:

    http://docs.sencha.com/ext-js/4-2/extjs-build/examples/form/dynamic.html

    Click on 'first name', then tab to next field. Then hold your cursor over the red error icon. The tooltip is mis-sized.

    Broken in IE10 and Chrome 26.
    Works in Firefox 19

    Ext 4.2.0, Windows 7

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    7
    Vote Rating
    7
    elee2002 is on a distinguished road

      1  

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2008
    Posts
    3
    Vote Rating
    0
    Iorek is on a distinguished road

      0  

    Exclamation


    I have the same problem

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    7
    Vote Rating
    1
    hemp is on a distinguished road

      0  

    Default


    Here is what I'm seeing with 4.2 GA and QuickTips:
    • Firefox 20.0 - Mac fails
    • Firefox 20.0 - Windows is OK
    • Chrome 26.0.1410.43 - Both Windows and Mac fail
    • IE 10.0.9200.16519 - is OK
    • Safari 6.0.3 7536.28.10 - Mac is OK
    On the failing browsers, I haven't been able to root cause the issue yet. Though the tip element always gets a style attribute of width:40px (if that helps).

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    119
    Vote Rating
    4
    john76543 is an unknown quantity at this point

      0  

    Default


    So a nasty bodge is:

    Code:
        if (Ext.isChrome || Ext.isIE) {
            Ext.override(Ext.tip.Tip, {
                minWidth: 200
            });
        }
    PS. I sometimes see it on IE10 as well, hence the inclusion above

  7. #7
    Sencha User Sharkanana's Avatar
    Join Date
    Nov 2011
    Location
    Charlotte, NC
    Posts
    39
    Vote Rating
    0
    Sharkanana is on a distinguished road

      0  

    Default


    I am seeing this with Chrome 26 also.

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2009
    Posts
    318
    Vote Rating
    47
    firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about

      0  

    Default


    I was in the same boat and needed an emergency fix. I ended up using css to nuke the width on the style that gets written out for tips.

    Code:
     .x-tip {
      width: auto !important;
     }
     
     .x-tip-body {
      width: auto !important;
     }
     
     .x-tip-body span {
      width: auto !important;
     }
    This is obviously a horrible long term solution since the width from the config options isn't honored any more, but I just wanted the tip to wrap to the content so it worked for me.

    Tooltips are used everywhere. This is a serious problem and Sencha needs to respond with a real workaround.

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2009
    Posts
    318
    Vote Rating
    47
    firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about

      0  

    Default


    I tried to step through this some more tonight. I don't know enough about Ext-JS 4 layouts yet to know for sure what's going on. Anyway, in experimenting I found that if the minWidth on Ext.tip.Tip was removed entirely, tooltips rendered ok

    Code:
    delete Ext.tip.Tip.prototype.minWidth;
    I think this is the best solution I've seen so far since the only functionality you have to give up is the default minWidth, which probably doesn't often dip below the default 40 anyway.

  10. #10
    Sencha Premium Member
    Join Date
    Jan 2009
    Posts
    318
    Vote Rating
    47
    firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about firefoxSafari has a spectacular aura about

      0  

    Default


    Quote Originally Posted by firefoxSafari View Post
    I tried to step through this some more tonight. I don't know enough about Ext-JS 4 layouts yet to know for sure what's going on. Anyway, in experimenting I found that if the minWidth on Ext.tip.Tip was removed entirely, tooltips rendered ok

    Code:
    delete Ext.tip.Tip.prototype.minWidth;
    I think this is the best solution I've seen so far since the only functionality you have to give up is the default minWidth, which probably doesn't often dip below the default 40 anyway.
    Argh - this works ok on Chrome but IE10 is still broken. I guess setting minWidth is still the most universal option... still searching.