JSFiddle - React, Tailwind, and code Playground

by jeetu_verma11

HTML

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

 Right: <input type="radio" name="tooltip" checked="true" />
  Left: <input type="radio" name="tooltip" />
   Top: <input type="radio" name="tooltip" />
Bottom: <input type="radio" name="tooltip" />

<div>
<input type="text" title="I am a tooltip!" style="margin: 70px 0 0 150px;" />
</div>

CSS

.ui-tooltip{
    background: #FFFFF;
    border: 2px solid #a4c8f5;
  }
  .ui-tooltip {
    padding: 5px 5px;
    border-radius: 3px;
    font: normal 12px "Helvetica Neue", Sans-Serif;
    }
  .ui-tooltip-content {
    position: relative;
  }
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.right .ui-tooltip-content::after {
    top: -2px;
    left: -15px;
    border-color: transparent #a4c8f5;
    border-width: 10px 10px 10px 0;
}
.left .ui-tooltip-content::after {
    top: 18px;
    right: -10px;
    border-color: transparent #666;
    border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
    bottom: -10px;
    left: 72px;
    border-color: #666 transparent;
    border-width: 10px 10px 0;    
}
.bottom .ui-tooltip-content::after {
    top: -10px;
    left: 72px;
    border-color: #666 transparent;
    border-width: 0 10px 10px;
}

JavaScript

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

$('input[type="radio"]').on('change', function() {
    var className = $(this).val();
    alert("className :"+className);
});