Speed up development with full-stack environments for every branch.

Learn More

Add a tool-tip to an input form field [jQuery]

Forked from How to use the jQuery Tooltip.

3314 Runs 9346 Views 2501 Copies
Saved

Saved

<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 to see the tooltips.
  </p>
  
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).