1

Tooltip width is not enough to display text inside it. So how can i increase the width of tooltip ? Here is my code:

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();

    Ext.create('Ext.tab.Panel', {
        width : 500,
        height : 200,
        style : 'margin: 50px',
        renderTo : Ext.getBody(),
        items : [{
            title : 'Tab One'
        }, {
            title : 'Tab Two',
            tabConfig : {
                tooltip : {
                    text : 'Hello tab one... This is James cook. How r u doing.:)',
                    title : 'Tooltip Header'
                }
            }
        }, {
            title : 'Tab Three'
        }]
    });
});

I have used:

div.x-tip {
    width: 300px !important; height: 100px !important;
}

Width is increasing but tooltip text is not adjusting to the width. I want to make tooltip text a single line. Any idea on this..??

enter image description here

Thanks in advance.

2 Answers 2

2

You can also just set a width property in the tip object.

        tooltip : {
            text : 'Hello tab one... This is James cook. How r u doing.:)',
            title : 'Tooltip Header',
            width: 100

        }
0

You can overload:

div.x-tip {
    width: 300px !important;
}

I confirmed this just now on a button with the tooltip property in ExtJS 4.2

The way that I uncovered this was pretty simple. I simply ran a grep inside of the ext/css directory for "tip" on all css files to discover what the DOM element would be (or you could simply examine the DOM yourself in the browser after showing at least one tooltip. Once you have that, you can target any of the sub-components in the hierarchy as you need to; in order to ensure that your text doesn't get clobbered.

I do wonder why the auto-sizer isn't working for this renderer but that's probably a question better asked of Sencha support.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.