JSFiddle - React, Tailwind, and code Playground

by jeetu_verma11

HTML

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

CSS

.ui-tooltip, .arrow:after {
        background: white;
        border: 1px solid #999;       
    }      

    .ui-tooltip {
        padding: 10px 12px;
        color: Black;
        font: 8pt "Helvetica Neue", Sans-Serif;   
        max-width: 150px;
        border: 1px solid #999;
        position: absolute;
    } 
  .arrow {
        height: 70px;
        width: 10px;    
        overflow: hidden;
        position: absolute;
        top: 0px;
        margin-top: -5px;
        left: -10px;
  }
  
  .arrow:after {
        content: "";
        position: absolute;
        width: 25px;  
        height: 25px;
        border-width: 0 15px 2px;
        box-shadow:6px 5px 9px -9px black;
        -webkit-transform-origin: 5px 25px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        tranform: rotate(45deg);
  }

JavaScript

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