JSFiddle - React, Tailwind, and code Playground

by jeetu_verma11

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-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:10px solid #999; 
    position: absolute;
    top: 50%;
    margin-top: -10px;
    margin-left: -22px;
}

JavaScript

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