CODEWITHSUNDEEP
javascriptextjspositiontooltipextjs5
zeke
zeke

Reputation: 3663

ExtJS 5 Tooltip position

I'm using tooltips for a button and it's menu items but I'm having a problem where the tooltips are covering the buttons themselves and frustrating users. I would like to position the tooltip completely to the left side of the button and menu items so that it does not cover any part of the element. Is there a way to do this?

Example here: fiddle

Ext.onReady(function () {

    Ext.QuickTips.init();

    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        padding: 100,
        items: [{
            tbar: {
                items: ['->',{
                    text: 'Toolbar button',
                    tooltip: 'toolbar button tooltip',
                    menu: {
                        items: [{
                            tooltip: 'menu item tooltip',
                            text: 'menu item'
                        }]
                    }
                }]
            }
        }]
    });
});

Upvotes: 1

Views: 3709

Answers (2)

mooreinc
mooreinc

Reputation: 11

Or you can add a 'mouseOffset' array in the tooltip config:

tooltip: { 
            text:        'This is a tooltip positioned slightly above the target', 
            mouseOffset: [0,-60] 
         }

Upvotes: 1

Semih Gokceoglu
Semih Gokceoglu

Reputation: 1428

Yes, you can. But, you have to create custom tooltip to set position.

var tip = Ext.create('Ext.tip.ToolTip', {
    target: menuButton.el,
    trackMouse: false,
    anchor: 'right', // set position
    constrainPosition :false,
    listeners: {
         beforeshow: function updateTipBody(tip) {
            tip.update('Toggle Button');
        }
    },
    renderTo: Ext.getBody()
});

//and menus

        Ext.each(menuItems.items.items, function(item) {
            var tipMenu = Ext.create('Ext.tip.ToolTip', {
                target: item.el,
                trackMouse: true, // change to false
                anchor: 'right',
                constrainPosition :false,
                listeners: {
                     beforeshow: function updateTipBody(tipMenu) {
                         tipMenu.update(tipMenu.triggerEvent.target.textContent);
                    }
                },
                renderTo: Ext.getBody()
            });
        });

And here is the fiddle: https://fiddle.sencha.com/#fiddle/tfo

Upvotes: 1

Related Questions