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示例实际上使用工具提示而不是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)它工作得很好。我想这与按钮没有被立即渲染有关。