Question

当文本字段处于焦点时，如何显示文本字段的工具提示，而不是鼠标悬停在其上时？

我使用TooltipConfig。

    TextField email = getEditor().getEmail();
    ToolTipConfig toolTipConfig = new ToolTipConfig();
    toolTipConfig.setBodyText("TEXT BODY");
    toolTipConfig.setAnchor(Style.Side.LEFT);
    toolTipConfig.setMouseOffsetY(0);
    toolTipConfig.setMouseOffsetX(0);

Answer 1

你在使用extjs吗？如果是这样，这是我的答案：

您需要创建自定义工具提示以禁用默认鼠标悬停事件。

Ext.define('nutnull.ToolTip', function() {
  return {
    extend: 'Ext.tip.ToolTip',
    xtype: 'nutnull-tooltip',
    // Set this as emptyFn so that it will not create mouse event to show the tooltip
    setTarget: Ext.emptyFn
  };
});

然后您可以覆盖文本字段以在焦点事件期间显示工具提示。

Ext.define('nutnull.override.Text', {
  override: 'Ext.form.field.Text',
  tip: null,
  onFocus: function() {
    // show tooltip if exist
    if(this.tip) {
      if(!this.tipCmp) {
        this.tipCmp =  Ext.create('nutnull.ToolTip', {
          target: this.id,
          html: this.tip
        });
      }
      // Get the position of the textfield instead of mouse position
      this.tipCmp.targetXY = this.getPosition();
      // Adjust the position.
      this.tipCmp.targetXY[0] += this.getWidth();
      this.tipCmp.targetXY[1] -= (this.getHeight()/2);
      // Manually show the tooltip
      this.tipCmp.show();
    }
    this.callParent(arguments);
  }
});

在textfield项中，只需添加tip: 'Sample Description' config。

{
  xtype: 'textfield',
  fieldLabel: 'Name',
  tip: 'Sample Description'
}

Answer 2

我解决了这个问题。我创建了新的Tooltip对象并将工具提示配置包装到此对象中。

TextField email = getEditor().getEmail();
ToolTipConfig toolTipConfig = new ToolTipConfig();
toolTipConfig.setBodyText("TEXT BODY");
toolTipConfig.setAnchor(Style.Side.LEFT);
toolTipConfig.setMouseOffsetY(0);
toolTipConfig.setMouseOffsetX(0);
Tooltip tooltip = new ToolTip(email,toolTipConfig);
tooltip.show();

当焦点处于焦点时，文本字段的显示工具提示

2 个答案: