javascript - ExtJS 5 工具提示位置

Question

我正在为按钮及其菜单项使用工具提示，但我遇到了一个问题，即工具提示覆盖了按钮本身并使用户感到沮丧。我想将工具提示完全放置在按钮和菜单项的左侧，这样它就不会覆盖元素的任何部分。有办法做到这一点吗？

此处示例: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'
                        }]
                    }
                }]
            }
        }]
    });
});

Answer 1

是的，你可以。但是，您必须创建自定义工具提示来设置位置。

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()
});

//和菜单

        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()
            });
        });

这是 fiddle :https://fiddle.sencha.com/#fiddle/tfo