I am trying to implement a specific functionality where the popup arrow should be at the edge of the textbox as shown in the image below. How can I achieve this? Additionally, how can I make sure that clicking outside the control destroys the popup instead of just calling blur event?
https://i.sstatic.net/oyL12.png
Below is the code snippet:
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();
},
}
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;
}