How to use stylish tool tip on hover of an element with jquery

To use the jquery basic tool tip you have to first include the following basic jquery file with another two. One will be use for jquery tool tip effect and other for tool tip css.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

The HTML code on which the tool tip will be applied.

<div style="margin-bottom:40px;">
  <button id="effect1" href="#" title="slide down on show">Example 1</button>
</div>
<div style="margin-bottom:40px;">
  <button id="effect2" href="#" title="explode on hide">Example 2</button>
</div>
<div style="margin-bottom:40px;">
  <button id="effect3" href="#" title="move down on show">Example 3</button>
</div>

The jquery code used for tool tip

<script>
  $(function() {

      /*  tool tip which will display on hover of First button  */

    $( "#effect1" ).tooltip({
      show: {
        effect: "slideDown",
        delay: 250
      }
    });

    /*  tool tip which will display on hover of Second button  */

    $( "#effect2" ).tooltip({
      hide: {
        effect: "explode",
        delay: 250
      }
    });

    /*  tool tip which will display on hover of Third button  */
    
    $( "#effect3" ).tooltip({
      show: null,
      position: {
        my: "left top",
        at: "left bottom"
      },
      open: function( event, ui ) {
        ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
      }
    });
  });
  </script>