Displaying tooltips programmatically

As well as enabling or disabling tooltips programmatically, we can equally show or hide tooltips at will, by clicking a button or suitable link on screen. Let's use both now, to show or hide one of the tooltips at will, in our next example.

In tooltip11.html, alter the last lines of our existing markup as indicated:

<label for="input">Please enter some text:</label>
<input type="text" id="tooltip2" title="I am a tooltip!">
<p>
  <button id="showtip">Show (open) Tooltip</button>
  <button id="hidetip">Hide (close) Tooltip</button>
</p>

Next, let's change the final <script> element to include the new event handlers that will be assigned to the new buttons we've just added:

<script>
  $(document).ready(function($){
    $("#tooltip").tooltip();

    $("#showtip").click(function(){
      $("#tooltip").tooltip("open");
    })
    $("#hidetip").click(function(){
      $("#tooltip").tooltip("close...