jqueryui: JQuery UI Tooltip

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tooltip </title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'check got result',
               show: "slideDown", // show immediately
               open: function(event, ui)
               {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'mouse hover tooltip',
               show: "fold", 
               close: function(event, ui)
               {
                  ui.tooltip.hover(function()
                  {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function()
                  {
                     $(this).fadeOut('500', function()
                     {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   <body style="padding:100px;">
       
      <div id="target">
         <a href="#" class="tooltip-9">Mouse hover</a>
         <a href="#" class="tooltip-10">Mouse hover</a>
      </div>
   </body>
</html>

Wednesday, 25 February 2015

JQuery UI Tooltip

No comments:

Post a Comment