JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Click on radio button to change arrow location</h4>

<input type="radio" name="tooltip" class="right" checked="true" /> Right
<input type="radio"  class="left" name="tooltip" />  Left
<input type="radio"  class="top"  name="tooltip" />  Top
<input type="radio"  class="bottom" name="tooltip" /> Bottom

<div>
<input type="text" title="This is a tooltip is very strange to visualization into popover" style="margin: 70px 0 0 150px;" />
</div>

CSS

.ui-tooltip {
    background: #FFFF;
    color: black;
    border: 1px solid #a4c8f5;

}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
    font-size: 1.2em;
    background-color: green;

}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
    height: 0;
        border-color: transparent;
           border-width: 11px
}


.right .ui-tooltip-content::after {
    top: 40%;
    left: -11px;
    border-right-color: rgba(0,0,0,0.25);
    border-left-width: 0;
}
.left .ui-tooltip-content::after {
    top: 18px;
    right: -10px;
    border-right-color: rgba(0,0,0,0.25);
    border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
    bottom: -10px;
    left: 72px;
    border-color: #a4c8f5 transparent;
    border-width: 10px 10px 0;    
}
.bottom .ui-tooltip-content::after {
    top: -10px;
    left: 72px;
    border-color: #a4c8f5 transparent;
    border-width: 0 10px 10px;
}

JavaScript

$(function() {
    var tooltips = $( "[title]" ).tooltip({
        position: {
    	my: "left center",
    	at: "right+10 center",
        
      }
    });
 });

$('input[type="radio"]').on('change', function() {
    var className = $(this).attr("class");
    var position;
    switch (className) {
        case 'top':
          position = { my: 'center bottom', at: 'center top-10' };
            break;
       case 'bottom':
          position = { my: 'center top', at: 'center bottom+10' };
            break;
       case 'left': 
          position = { my: 'right center', at: 'left-10 center' };
            break;
       case 'right':
          position = { my: 'left center', at: 'right+10 center-20' };
            break;
    }
    position.collision = 'none';
    $( "[title]" ).tooltip('option', 'tooltipClass', className);
    $( "[title]" ).tooltip('option', 'position', position);
});
$('input[class="right"]').trigger('change');