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

[rafaelrp]

Ah ok, i'll wait the update..

Thanks!

[john76543]

Any timescale for 4.2.1 GA?

[andong]

4.2 has so many bugs, we hope the GA release will publish ASAP.

[Daniil]

ExtJS 4.2.1 GA has been released quite a few days ago.
http://www.sencha.com/products/extjs...-js-4.2.1/2281

[rafaelrp]

ExtjJS 4.2 with a lot of bugs, i will still use the 4.1 version that is more stable.

Thansk!

[jemptymethod]

I was having the same issue, luckily for me however I want to dynamically create tooltips from images, so in the following manner I'm able to set minWidth to the width of the image, hope it might help somebody:

    function applyIframeImgLinkTtips(iframeImgLinks) {
        for (var i=0, n=iframeImgLinks.length; i<n; i++) {
            link = iframeImgLinks[i];
            
            (function(link) {
                var image = new Image(),
                    imageSrc = link.href.split('#')[1];
                    // e.g. link.href = http://dexygen.com/static/README/SeoForExtjs/index.php#/imgs/cuesiteview_google_search.png
                    
                image.onload = function() {
                    Ext.create('Ext.tip.ToolTip', {
                        target: link,
                        html: Ext.String.format('<img src="{0}" />', imageSrc),
                        minWidth: image.width
                    });
                }
                
                image.src = imageSrc;
            })(iframeImgLinks[i]);
        }
    }

[jemptymethod]

Sadly my "solution" does not work completely in Chrome (need to try Safari too). The tooltip renders with the full width of the image *the first time* it is moused over, but not on subsequent mouse-overs when it reverts to some default.

Works in IE9 and FF21 however.

[jemptymethod]

So what's the status on this getting fixed? Twitter Bootstrap's starting to look awfully freaking good to me in the meantime (and mind you I've been using ExtJS for 4.5 years)

[Phil Guerrant]

So what's the status on this getting fixed? Twitter Bootstrap's starting to look awfully freaking good to me in the meantime (and mind you I've been using ExtJS for 4.5 years)

The issue with webkit has been fixed in Ext JS 4.2.1. Try downloading it here: http://www.sencha.com/products/extjs/download/

4.2.1 still has a minor issue with tooltip widths that only affects Firefox on Mac. The following override makes FF/Mac behave. Make sure to remove this override when you upgrade because the fix will be included in the next 4.2.x release.

Ext.define('Ext.SubPixelRoundingFix', {
    override: 'Ext.dom.Element',


    getWidth: function(contentWidth, preciseWidth) {
        var me = this,
            dom = me.dom,
            hidden = me.isStyle('display', 'none'),
            rect, width, floating;


        if (hidden) {
            return 0;
        }


        // Gecko will in some cases report an offsetWidth that is actually less than the width of the
        // text contents, because it measures fonts with sub-pixel precision but rounds the calculated
        // value down. Using getBoundingClientRect instead of offsetWidth allows us to get the precise
        // subpixel measurements so we can force them to always be rounded up. See
        // https://bugzilla.mozilla.org/show_bug.cgi?id=458617
        // Rounding up ensures that the width includes the full width of the text contents.
        if (Ext.supports.BoundingClientRect) {
            rect = dom.getBoundingClientRect();
            // IE9 is the only browser that supports getBoundingClientRect() and
            // uses a filter to rotate the element vertically.  When a filter
            // is used to rotate the element, the getHeight/getWidth functions
            // are not inverted (see setVertical).
            width = (me.vertical && !Ext.isIE9 && !Ext.supports.RotatedBoundingClientRect) ?
                    (rect.bottom - rect.top) : (rect.right - rect.left);
            width = preciseWidth ? width : Math.ceil(width);
        } else {
            width = dom.offsetWidth;
        }


        // IE9/10 Direct2D dimension rounding bug: https://sencha.jira.com/browse/EXTJSIV-603
        // there is no need make adjustments for this bug when the element is vertically
        // rotated because the width of a vertical element is its rotated height
        if (Ext.supports.Direct2DBug && !me.vertical) {
            // get the fractional portion of the sub-pixel precision width of the element's text contents
            floating = me.adjustDirect2DDimension('width');
            if (preciseWidth) {
                width += floating;
            }
            // IE9 also measures fonts with sub-pixel precision, but unlike Gecko, instead of rounding the offsetWidth down,
            // it rounds to the nearest integer. This means that in order to ensure that the width includes the full
            // width of the text contents we need to increment the width by 1 only if the fractional portion is less than 0.5
            else if (floating > 0 && floating < 0.5) {
                width++;
            }
        }


        if (contentWidth) {
            width -= me.getBorderWidth("lr") + me.getPadding("lr");
        }


        return (width < 0) ? 0 : width;
    }
});

[jemptymethod]

The issue with webkit has been fixed in Ext JS 4.2.1. Try downloading it here: http://www.sencha.com/products/extjs/download/

4.2.1 still has a minor issue with tooltip widths that only affects Firefox on Mac. The following override makes FF/Mac behave. Make sure to remove this override when you upgrade because the fix will be included in the next 4.2.x release.

Yeah well 4.2.1 just did this to my buttons in FF21 on Windows7:

extjs_421_supposed_upgrade.png