ExtJS 4.2: ToolTips not wide enough to see contents

extjs, javascript

Solution

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;

Problem

I've noticed since upgrading to ExtJS 4.2 that tooltips displayed when a textfield has an error in it are not wide enough to see the contents of the tooltip - they always seem to be 40px wide. Here's a test case which shows the problem: ``` <html> <head> <title>Field error tooltips</title> <link rel="stylesheet" type="text/css" href="ext-4.2.0/resources/css/ext-all.css"> <script type="text/javascript" src="ext-4.2.0/ext-all-debug.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ var form = Ext.create("Ext.form.Panel",{ title: 'My form', width: 300, height: 100, items: [ {xtype: 'textfield', name: 'FIELD1', fieldLabel: 'Field 1', allowBlank: false} ], renderTo: Ext.getBody() }); }); </script> </body> </html> ``` In the above example if you click the field and then click out of it without typing anything, it shows a tooltip saying that it's not allowed to be blank. The tooltip is not wide enough to see the message unfortunately. Has anyone else come across this? Thanks!

Original source