Wednesday 3 September 2014

How to use the jQuery Tooltip in PHP

<html>
<head>
   
  <!-- Load the jQuery UI CSS -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 
  <!-- Load jQuery and jQuery UI -->
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
 
  <!-- jQuery UI Slider code -->
  <script>
 
  // When the browser is ready...
  $(function() {
 
    // Call the documents tooltip function
    // This will find all the input elements and
    // add their titles to the Tooltip
    $( document ).tooltip();
   
  });
 
  </script>
</head>
<body>

  <!--  The labels with inputs with Tooltip content -->
  <p>
    <label for="input1">
      label 1:
    </label>
    <!-- This contains the meta data that will be displayed in the Tooltip -->
    <input id="input1" title="tooltip content 1. " />
  </p>

  <p>
    <label for="input2">
      label 2:
    </label>
    <!-- This contains the meta data that will be displayed in the Tooltip -->
    <input id="input2" title="tooltip content 2. " />
  </p>
 
  <p>
    Hover over the fields to see the tooltip.
  </p>
 
</body>
</html>

No comments:

Post a Comment