Apply css to window popup and destroy it on focus leave in ext js

Question

I want to implement following functionality. The problem in below image is popup arrow should be at the edge of the textbox, how can I achieve that?

And when I click on textbox it immediately calls blur event and destroy the popup, how can I destroy popup when user clicks outside the control?

My code is as follow:

Popup

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>';               
},  

Class:

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

Answer 1

The answer is: do not use the show listener.

It is easier to use the offset from showBy.

Here is a fiddle with all you answers and a propper setup of the text you want to show in the popup

popup.showBy(field.el, 'l-r', [10,0]);