Extjs - How to add a tooltip at a fixed position on panel

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.

Since my tooltip is not floating, so 'alignTarget' might not work as the description specifies it needs to be floating and tried using 'showAt' method in beforeshow and show events but tooltip is still displayed next to pointer. — wahab memon
i guess its a floating cmp, but may be another option: have you tried anchor and trackMouse false? this will display the tip at a static position. getAlignRegion() looks like the method being called before the tip will be shown. docs.sencha.com/extjs/6.5.3/classic/… — hwsw
Yes. I tried using anchor, which brings the tooltip to a static position but it gets outside the panel and trackMouse is already false as the tooltip does not follow the pointer all the time. — wahab memon

wahab memon wahab memon · Accepted Answer · 2021-02-09T08:09:33

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

Extjs - How to add a tooltip at a fixed position on panel

1 Answers