我想实现以下功能。下图中的问题是弹出箭头应该位于文本框的边缘，如何实现？
当我单击文本框时，它会立即调用模糊事件并销毁弹出窗口，当用户单击控件外部时，我如何销毁弹出窗口？
我的代码如下：
弹出窗口

Ext.define('tooltip', {
extend: 'Ext.window.Window',
displayText: '', 
xtype: 'myWin',
width: 200,
height: 50,     
layout: 'fit',
align:'center',    
cls: 'arrow-box', 
listeners: {
    show: function() {
        console.log('show');
        this.el.setStyle('left', 600); // Not applying           
    },
},
initComponent: function () {

    this.callParent();      

    this.html = '<div> hello this is test window</div>';               
},

类别：

items: [
                {
                    fieldLabel: 'Name',
                    labelClsExtra: 'x-form-item-label x-required',
                    name: 'Name',
                    itemId: 'Name',
                    xtype: 'textfield',
                    fieldCls: 'big',
                    width: 650,
                    enforceMaxLength: true,
                    maxLength: 1000,                       
                    listeners: { 
                        focus: function(field) {                                

                                field.suspendEvent('blur');
                                field.suspendEvent('focus');

                               var displayMessage ='';
                                field.popup = field.popup  || Ext.create('tooltip',{
                                    displayText: displayMessage
                                });

                                field.popup.showBy(field.el, 'l-r');
                                field.focus();
                                field.resumeEvent('focus');
                                field.resumeEvent('blur');                                   

                        },
                        blur: function(field) {
                            console.log('destroy');
                            if( field.popup != undefined &&  field.popup != null)field.popup.hide(); // It is being called immediately after focus event , so popup never comes
                        },                                                  
                 }

CSS公司

.arrow-box {
position: relative;
background: #fff;
border: 1px solid #859ba8;
overflow: visible;
padding: 30px;
}
.arrow-box:after, .arrow-box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow-box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}

.arrow-box:before {
  border-color: rgba(133, 155, 168, 0);
  border-right-color: #859ba8;
  border-width: 11px;
  margin-top: -11px;
}

.arrow-box .x-box-inner {
  display:none;
  height:0px !important;
}

.arrow-box .x-window-body {
  top : 0px !important;
  width: 200px !important;
}