ExtJS 4.2: ToolTips not wide enough to see contents

this is o bug of extjs 4.2, it work on firefox 19 but not in chrome 26

you should overide the css class for the tooltip:

.x-tip {
    width: auto !important;
}
.x-tip-body {
    width: auto !important;
}
.x-tip-body span {
    width: auto !important;
}

Still looking at this now and then out of curiosity...

I tried comparing the the 4.1 and 4.2 sources some more. I think the problem is in the auto container layout somewhere. Between 4.1 and 4.2 A TON of stuff changed. So we can look through this.

hopefully it works out for some people.

if(Ext.isIE10) { 
      Ext.supports.Direct2DBug = true;
  }

  if(Ext.isChrome) {
      Ext.define('Ext.layout.container.AutoTip', {
        alias: ['layout.autotip'],
        extend: 'Ext.layout.container.Container',

        childEls: [
            'clearEl'
        ],

        renderTpl: [
            '{%this.renderBody(out,values)%}',

            '<div id="{ownerId}-clearEl" class="', Ext.baseCSSPrefix, 'clear" role="presentation"></div>'
        ],

        calculate: function(ownerContext) {
            var me = this,
                containerSize;

            if (!ownerContext.hasDomProp('containerChildrenDone')) {
                me.done = false;
            } else {

                containerSize = me.getContainerSize(ownerContext);
                if (!containerSize.gotAll) {
                    me.done = false;
                }

                me.calculateContentSize(ownerContext);
            }
        }
    });

    Ext.override(Ext.tip.Tip, {
        layout: {
            type: 'autotip'
        }
    });
}

Ext.QuickTips.init();

You can see more details on this forum topic.

Sorry I can't be of much help, it is a known issue with 4.2.0 that will likely be fixed in their next release. See: http://www.sencha.com/forum/showthread.php?257201

As a temporary workaround, if you don't need dynamic sizing of the tip container, you can just override the CSS

.x-tip-form-invalid, .x-tip-body-form-invalid {
    width: 150px !important;
}

Thanks for the help guys, but I found a solution on the sencha forum which seems to work:

http://www.sencha.com/forum/showthread.php?260106-Tooltips-on-forms-and-grid-are-not-resizing-to-the-size-of-the-text/page3#24

Specifically the following code at the beginning of the app:

delete Ext.tip.Tip.prototype.minWidth;