1

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

为了避免这种行为，我一直在尝试让工具提示出现在按钮上方。起初这看起来很简单，因为文档说这可以通过将工具提示锚属性设置为'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 示例，它似乎在那里工作正常。我看到的唯一区别是，在示例中他们明确设置了目标属性，而在我的情况下，它是由Ext.button.Button#setTooltip()在创建时自动设置的。

最后，我还尝试将mouseTrack设置为true无效，这似乎表明正在发生一些可疑的事情。

4

2 回答 2

3

以下是我在 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'
    });
  }
}
于 2012-03-05T15:11:35.477 回答
1

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

于 2012-03-02T17:00:42.213 回答