JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<button id="b1">Change ToolTip</button>

<p title="TOOLTIP!">Hover</p>

CSS

p{
  border:1px solid red;
  width: 100px;

}

JavaScript

$(document).ready(function(){
    var ats = ["center right", "center top", "left center"],
        mys = ["right top", "left center", "center center"],
        count=0;
    
    $("#b1").click(function(){
        if(count===3)
            count=0;
        $("p").tooltip({
            position:{
                at:ats[count],
                my:mys[count],
            }
        });
        count++;
    });
});