Extjs - 如何在面板上的固定 position 处添加工具提示

Question

I am trying to show a menu inside a tooltip on multiple panel items. So on hover of those item-panels I want to show my menu button which will be displayed with the means of tooltip. I was able to do this much, but I am unable to set the tooltip location on top right corner of my panels items, as the tooltip is always displayed wherever I hover the mouse pointer. Also I tried using the anchor config, but it just attaches the tooltip to the parent panel. Is there any configuration to set the position of tooltip or any other approach to achieve this use case.

Here is my fiddle .

Answer 1

I was able to fix the position of tooltip to the top-right corner of panel by using the configs anchor: true and defaultAlign: 't100-r30'

Below is the updated fiddle code:

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