CODEWITHSUNDEEP
extjs
Deniz
Deniz

Reputation: 813

How to change a tooltip's position in ExtJs 3.3

i want to change a tooltip's position to show it upon a button. I tried the method below as mentioned in ExtJs's forum. It doesn't work, i can't override the getTargetXY method, the tooltip is shown always in the same position. Do you have any solution ?

this.desktopButton = new Ext.Button({
    icon: "arrow_in.png",
    scope: this,
    handler: this.desktopButtonHandler,
    tooltip: new Ext.ToolTip({
        text: 'Message',
        getTargetXY: function () {
            return [100, 100];
        }
    })
});

Upvotes: 2

Views: 3888

Answers (2)

Amir G
Amir G

Reputation: 1

Note that setting 'targetXY' may prove unhelpful, as Ext JS may override this setting (depending on the view size). Overriding the "showAt" method can prevent this:

showAt:function() {     
    var xy = [this.getTargetXY()[0],this.getTargetXY()[1]-this.height]
    MyTooltip.superclass.showAt.call(this, xy);
}

Upvotes: 0

NT3RP
NT3RP

Reputation: 15370

Ext elements can only be passed configuration options as specified in the documentation; getTargetXY is not one of those options.

If you want to override that method, you have two choices:

  • Override all Ext Tooltips to use your new function
  • Extend the existing Tooltip class to support overriding that method

I would not recommend overriding the method, as that could have other consequences. I will, however, explain how to do both.

To override the tooltip:

Ext.override(Ext.Tooltip, {
    getTargetXY: function() {
        return [100, 100]
    }
});

To extend the tooltip:

MyToolTip = Ext.Extend(Ext.Tooltip, {
    constructor: function(config) {
        var config = config || {};
        if (config.getTargetXY) {
            this.getTargetXY = config.getTargetXY;
        }

        MyToolTip.superclass.constructor.call(this, config);
    }
});

Upvotes: 5

Related Questions