JSFiddle - React, Tailwind, and code Playground

HTML

<p><label for="age">Your age:</label> <input id="age" title=" for tooltip purpose and here i am checking for dynamic arrow location according to content."  style="margin: 40px 0 0 10px;"/></p>

<p><label for="age">Your age:</label> <input id="age" title="short title"  style="margin: 40px 0 0 10px;"/></p>

CSS

.ui-tooltip {
    padding: 10px 12px;
    color: Black;
    font: 8pt "Helvetica Neue", Sans-Serif;   
    max-width: 150px;
    background: white;
    border: 1px solid #999;
    position: absolute;
} 
.ui-tooltip:before {
    content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #007bff transparent transparent transparent;
    position: absolute;
    top: 100%;
    margin-top: 0px;
    left:50%;
    margin-left: -5px;
}

JavaScript

$(function() {
    $( document ).tooltip({
      position: {
        my: "bottom center",
    	at: "top+10 center",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass(feedback.vertical)
            .addClass(feedback.horizontal)
            .appendTo( this );
        }
      }
    });
  });