Question

我试图在多个面板项目的工具提示内显示一个菜单。因此，在悬停这些项目面板时，我想显示我的菜单按钮，该按钮将通过工具提示的方式显示。我能够做到这一点，但我无法在面板项目的右上角设置工具提示位置，因为工具提示始终显示在我将鼠标指针悬停在任何地方。我也尝试使用锚配置，但它只是将工具提示附加到父面板。是否有任何配置来设置工具提示的位置或任何其他方法来实现此用例。

这是我的 fiddle。

Answer 1

我能够通过使用配置 anchor: true 和 defaultAlign: 't100-r30'

将工具提示的位置固定到面板的右上角

以下是更新的小提琴代码：

var someButton = Ext.create({
    xtype: 'button',
    text: 'Some button'
});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({
            id: 'parentPanel',
            height: 300,
            xtype: 'panel',
            title: 'parentPanel',
            items: [{
                html: "<span style='font-size:20px;'>Hover mouse on this green panel</span>",
                bodyStyle: "background: lightgreen;",
                xtype: 'panel',
                height: "50%",
                width: "70%",
                padding: "5 5",
                cls: 'overlayMenuCls'
            }, {
                html: "<span style='font-size:20px;'>Hover mouse on this blue panel</span>",
                bodyStyle: "background: lightblue;",
                xtype: 'panel',
                height: "50%",
                width: "70%",
                padding: "5 5",
                cls: 'overlayMenuCls'
            }],
            listeners: {
                boxready: {
                    fn: 'onPanelBeforeRender',
                    scope: this
                }
            },
            layout: "vbox",
            renderTo: Ext.getBody()
        });
    },

    onPanelBeforeRender: function (view) {
        var me = this;
        console.log(view);
        var tip = Ext.create('Ext.tip.ToolTip', {
            target: view.el,
            delegate: '.overlayMenuCls',
            //             trackMouse: true,
            anchor: true,
            dismissDelay: 0,
            defaultAlign: 't100-r30',
            items: [{
                xtype: 'button',
                text: 'menu',
                cls: "overlayMenuCls",
                menu: {
                    items: [{
                        text: 1
                    }, someButton]
                },
                listeners: {
                    mouseover: function () {
                        tip.isItemOver = true;
                    },
                    mouseout: function () {
                        tip.isItemOver = false;
                    }
                }
            }],
            listeners: {
                beforeshow: function (tip) {
                    var button = tip.items.items[0];
                    var menu = button.menu;
                    console.log(tip.items.items[0]);
                },
                beforehide: function (tip) {
                    if (tip.isItemOver) {
                        return false;
                    }
                }
            }
        });
    }
});

Extjs - 如何在面板的固定位置添加工具提示

1 个答案: