CODEWITHSUNDEEP
extjsextjs4extjs-mvc
Pablo Borowicz
Pablo Borowicz

Reputation: 921

ExtJS toolbar button tooltip does not seem to respond to settings

I have a panel that is located at the bottom of the page. Inside its bottom toolbar, there's this button which I need to attach a tooltip to. Since this button is at the bottom of the page and there's no space below it, whenever a tooltip is displayed, it is drawn on top of the button – partially blocking it.

In order to avoid this behavior, I've been trying make the tooltip appear just over the button. At first this seemed simple, because the documentation says this can be simply accomplished by setting the tooltip anchor property to 'top'.

However, when I mouse over the button, the current anchor setting for the tooltip does not seem to be taken into account – the tooltip simply falls back to its default behavior and continues to be displayed just to the right of the cursor:

When hovering

Am I doing something wrong here?

Here's a snip of my code:

Ext.define('Dashboard.view.companies.ListPanel', {
  extend: 'Ext.grid.Panel',

  // [snipped code]

  bbar: [{
      xtype: 'tbtext',
      text: 'Filtre actuel:'
    },{
      xtype: 'button',
      id: 'filter',
      text: 'Sociétés traitées',
      tooltip: {
        text: 'Enlever ce filtre',
        anchor: 'top'
      }
  }],

  // [snipped code]

});

I don't think that constrainPosition has anything to do with this problem, since I tried setting it to false and it didn't change things.

Setting the anchor to top, left and right doesn't seem to have any effect.

I looked at the QuickTips examples in the documentation and it seems to work fine there. The only difference I see is that in the examples they set the target property explicitly, while in my case it is set automatically by Ext.button.Button#setTooltip() upon its creation.

Finally, I also tried setting mouseTrack to true to no effect, which seems to point out that something fishy is going on.

Upvotes: 1

Views: 6312

Answers (2)

Pablo Borowicz
Pablo Borowicz

Reputation: 921

Here's how I worked it around after Geronimo's answer:

// works
listeners: {
  afterrender: function() {
    Ext.create('Ext.tip.ToolTip',{
      target: 'filter',
      html: 'Enlever ce filtre',
      anchor: 'top'
    });
  }
}

Note that this way I'm using Ext.tip.Tooltip instead of Ext.tip.QuickTip. I didn't notice this before, but the QuickTips example actually uses Tooltips instead of QuickTips! It would seem that there's a bug in QuickTips that prevents anchoring from working right, because I tried this to the same result as before:

// doesn't work as expected
listeners: {
  afterrender: function() {
    Ext.tip.QuickTipManager.register({
      target: 'filter',
      text: 'Enlever ce filtre',
      anchor: 'top'
    });
  }
}

Upvotes: 3

egerardus
egerardus

Reputation: 11486

I ran into the same problem, I don't know why it is set-up like this, or what the root cause is but I found that for some reason using the Ext.button.Button tooltip config doesn't apply the options properly. When I did it just like the example shows: by defining the tooltip configs in a seperate object with a target config, and then using Ext.create('Ext.tip.ToolTip', config) it worked totally fine. I suppose it has something to do with the button not being rendered right away.

Upvotes: 1

Related Questions