我应该如何向 ExtJS 组件添加工具提示？答案

【问题标题】：How should I add a tooltip to an ExtJS Component?我应该如何向 ExtJS 组件添加工具提示？
【发布时间】：2011-04-30 00:32:40
【问题描述】：

我正在制作一个 ExtJS 组件，我希望它使用 QuickTips 工具提示。如果我使用 DomHelper 创建一个元素，我可以设置一个工具提示，不费吹灰之力。但是，如果我制作一个组件，例如

new BoxComponent({
  qtip: "This is a tip"
});

什么都没有发生。我也尝试将属性命名为“工具提示”，但没有运气。有正确的方法吗？我现在有效的黑客是

new BoxComponent({
  qtip: "This is a tip",
  listeners: {
    rendered: function(c){
      Ext.QuickTips.register({
        target: c.getEl(),
        text: c.qtip
      }
    }
});

我觉得不可能是对的。我想我可以扩展 Component 以自动执行此操作，但这似乎是一个很常见的情况，我应该能够做到这一点，而无需像这样戳在引擎盖下。

【问题讨论】：

请注意，该事件称为“afterrender”，而不是“rendered”。

标签： extjs tooltip

【解决方案1】：

在 ExtJS 4.2.1 中，我可以通过这种方式向复选框添加提示：

new Ext.form.field.Checkbox({
  ...
  tip: 'This is a tip',
  listeners: {
    render: function(c) {
      Ext.create('Ext.tip.ToolTip', {
        target: c.getEl(),
        html: c.tip 
      });
    }
  });

【讨论】：

【解决方案2】：

我认为你做的绝对正确。我真的不认为在任意组件中需要快速提示，尤其是在容器中，因为这可能会导致同一组件中出现多个工具提示。

【讨论】：

好吧，我是新手。我几乎没有理解“组件”和“元素”之间的区别（组件有一个元素，对吧？）。我想要做的是，在我的页面上制作一个事物，它具有 a) 工具提示和 b) 点击处理程序。我希望能够用大约两行代码来做到这一点——我不讲道理吗？
组件是其他框架所称的小部件，由嵌套元素（基本上是 DOM 节点的包装器）组成。如果您经常需要带有工具提示的组件，您可能需要考虑创建一个插件，因此您可以非常简单地使用 plugins: [ComponentQickTipPlugin], qtip: "This is a tip" - 这是两行 ;)
听起来很不幸，简短的版本是“是的，这应该更容易，不，它不是。” :(
所以我必须为组件上的每个工具提示添加 8 行代码？
@OliverWatkins 是的：/ 或者使用包含对工具提示的支持的自定义版本覆盖 Ext.component。

【解决方案3】：

它应该可以工作：

new BoxComponent({
 tooltip: new Ext.ToolTip({
        title: 'Example Tooltip title',
            text: 'Example Tooltip text'

    }),
  listeners: {
    rendered: function(c){
      Ext.QuickTips.register({
        target: c.getEl(),
        text: c.qtip
      }
    }
});

【讨论】：

这在 AEM 中帮助了我。 CQ.Ext.QuickTips.init(); new CQ.Ext.form.Checkbox({ title:'xyz', text:'abc', listeners: { render: function(c) { CQ.Ext.QuickTips.register({ target: c, title: c.title, text: c.text, width: 200, dismissDelay: 10000 }); } } });

【解决方案4】：

嗯。我看了一下Ext.Button 是如何做到的，将tooltip 传递给配置调用setTooltip。

未经测试，但我认为您最好的选择是：

Ext.Component.prototype._onRender = Ext.Component.prototype.onRender;
Ext.override(Ext.Component, {
  onRender: Ext.Component.prototype._onRender.createSequence(function(ct, position) {
    // setTooltip code adapted from Ext.Button, looking at tooltip property
  });
});

【讨论】：

【解决方案5】：

我认为这是 Extjs 4 中最好的方法：

你应该添加一个afterrender监听器，然后当你的组件已经创建时你可以添加工具提示，这样：

listeners : {
    afterrender : function(obj) {
        if (this.max != null && this.ave != null && this.min != null) {
            obj.tip = Ext.create('Ext.tip.ToolTip', {
                        target : obj.getEl().getAttribute("id"),
                        trackMouse : true,
                        renderTo : document.body,
                        html : this.htmlTip,
                        title : this.title
                    });
        }
    }
}

希望对你有帮助。

【讨论】：

【解决方案6】：

最简单的方法是在组件的主元素上设置'data-qtip'属性：

{
    xtype: 'box',
    autoEl: {
        'data-qtip': "Tooltip text"
    }
}

确保在应用程序启动时启用 qtips：

Ext.tip.QuickTipManager.init();

【讨论】：

【解决方案7】：

我在 ExtJs 3 中总是使用这种方式

listeners: {
    render: function(c) {
        Ext.QuickTips.register({
            target: c,
            text: 'Enter \'-1\' for a 1 time only'
        });
    }
}

【讨论】：

【解决方案8】：

这种方法很完美！尝试一下！ (Extjs 4.2)

var boxComponent = Ext.create('Ext.Component', {
  id: 'id111',
  html: '<img src="js/extjs/resources/cb-theme/images/shared/icon-question.png">',
  width: 20,
  height: 20,
  margin: '0 0 0 10'
});

Ext.tip.QuickTipManager.init();

Ext.tip.QuickTipManager.register({
  target: 'id111',
  title: 'My Tooltip',
  text: 'This tooltip was added in code',
  width: 100,
  dismissDelay: 10000 // Hide after 10 seconds hover
});

【讨论】：

【解决方案9】：

{
    xtype: 'checkbox',
    fieldLabel: 'Test Label',
    name: 'data_field',
    autoEl: {
        tag: 'div',
        'data-qtip': 'This is a tip'
    }
}

【讨论】：

【解决方案10】：

{
    xtype: 'checkbox',
    tip: 'This is a tip',
    listeners: {
        render: function(c) {
            Ext.create('Ext.tip.ToolTip', {
                target: c.getEl(),
                html: c.tip
            });
        }
    }
}

【讨论】：

请解释一下你的答案