ExtJS工具栏按钮工具提示似乎没有响应设置

Question

我有一个位于页面底部的面板。在它的底部工具栏中，有一个我需要附加工具提示的按钮。由于此按钮位于页面底部且下方没有空格，因此每当显示工具提示时，它都会在按钮顶部绘制 - 部分阻止它。

为了避免这种行为，我一直在尝试让工具提示出现在按钮上方。起初这看起来很简单，因为文档说这可以通过将工具提示anchor属性设置为'top'来完成。

然而，当我将鼠标悬停在按钮上时，似乎没有考虑工具提示的当前锚点设置 - 工具提示只是回退到其默认行为并继续显示在光标右侧：

我在这里做错了吗？

以下是我的代码片段：

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]

});

我不认为constrainPosition与此问题有任何关系，因为我尝试将其设置为false并且它没有改变。

将主播设置为top，left和right似乎没有任何效果。

我查看了文档中的QuickTips examples，似乎在那里工作正常。我看到的唯一区别是，在示例中，他们明确地设置了target属性，而在我的情况下，它由Ext.button.Button#setTooltip()在创建时自动设置。

最后，我还尝试将mouseTrack设置为true无效，这似乎指出了一些可疑的事情。

Answer 1

这是我在Geronimo的回答之后如何解决这个问题：

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

请注意，这样我使用Ext.tip.Tooltip代替Ext.tip.QuickTip。我之前没有注意到这一点，但QuickTips示例实际上使用的是Tooltips而不是QuickTips！似乎QuickTips中存在一个错误，导致无法正常工作，因为我尝试了与之前相同的结果：

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

Answer 2

我遇到了同样的问题，我不知道它为什么会这样设置，或根本原因是什么但我发现由于某些原因使用Ext.button.Button工具提示配置不适用选项正确。当我做just like the example shows时：通过使用目标配置在单独的对象中定义工具提示配置，然后使用Ext.create('Ext.tip.ToolTip', config)它完全正常。我想这与按钮没有立即渲染有关。