JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type='text' title='tooltip!!' />
<button id='btnClick'>Click to toggle open/close!</button>

JavaScript

(function( $ ) {
  $.widget( "custom.tooltipX", $.ui.tooltip, {
    options: {
      autoHide:true
    },

    _create: function() {
      this._super();
      if(!this.options.autoHide){
        this._off(this.element, "mouseover focusin");
      }
    },

    _open: function( event, target, content ) {
      this._superApply(arguments);

      if(!this.options.autoHide){
        this._off(this.element, "mouseleave focusout");
      }
    }
  });

}( jQuery ) );

var isTooltipOpened = false;
$('input').tooltipX({
    autoHide: false
});

$('#btnClick').click(function(e){
    if(isTooltipOpened) {
       $('input').tooltipX("close");
       isTooltipOpened = false;
    }
    else{ 
       $('input').tooltipX("open");
       isTooltipOpened = true;
    }
});