ExtJS toolbar button tooltip does not seem to respond to settings

Question

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.

Pablo Borowicz Pablo Borowicz · Accepted Answer · 2012-03-05T15:11:35

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

ExtJS toolbar button tooltip does not seem to respond to settings

2 Answers