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;