文本框处于焦点时的sencha显示工具提示

Question

How do I display tooltip of a text field when it is in focus, not when mouse is hovering over?

I use 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

Are you using extjs? If so, here's my answer:

You need to create custom tooltip to disable the default mouseover event.

 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 }; }); 

Then you can override the textfield to show tooltip during focus event.

 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); } }); 

In the textfield item, just add tip: 'Sample Description' config.

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

Answer 2

I resolved this problem. I made new Tooltip object and wrapped tooltip config into this object.

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();