JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div>
  Name:
  <input type="text" id="name" title="Please input your name" />
  <span id="hidden" title="You just clicked me"></span>
  <button id="start" type="button">Click Me!</button>
</div>

CSS

div {
  padding: 30px;
}

#hidden {
  display: none;
}

JavaScript

$(function () {  
  // set up tooltip on both elements
  $("#name, #hidden").tooltip({
    
  });
  
  $('#start').click(function () {
    // I don't like this one bit, but it works
    // I am triggering an event that mimics a hover
    // over the #hidden element which is not displayed
    // on the page "display: none;" in CSS
    // Then there is a 2 second delay, then it triggers
    // the mouse leaving the link
   
  });
});