third-party/jquery-ui-1.10.2/demos/tooltip/forms.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Tooltip - Forms</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.position.js"></script>
  11         <script src="../../ui/jquery.ui.tooltip.js"></script>
  12         <script src="../../ui/jquery.ui.button.js"></script>
  13         <link rel="stylesheet" href="../demos.css">
  14         <style>
  15         label {
  16                 display: inline-block; width: 5em;
  17         }
  18         fieldset div {
  19                 margin-bottom: 2em;
  20         }
  21         fieldset .help {
  22                 display: inline-block;
  23         }
  24         .ui-tooltip {
  25                 width: 210px;
  26         }
  27         </style>
  28         <script>
  29         $(function() {
  30                 var tooltips = $( "[title]" ).tooltip();
  31                 $( "<button>" )
  32                         .text( "Show help" )
  33                         .button()
  34                         .click(function() {
  35                                 tooltips.tooltip( "open" );
  36                         })
  37                         .insertAfter( "form" );
  38         });
  39         </script>
  40 </head>
  41 <body>
  42
  43 <form>
  44         <fieldset>
  45                 <div>
  46                         <label for="firstname">Firstname</label>
  47                         <input id="firstname" name="firstname" title="Please provide your firstname.">
  48                 </div>
  49                 <div>
  50                         <label for="lastname">Lastname</label>
  51                         <input id="lastname" name="lastname" title="Please provide also your lastname.">
  52                 </div>
  53                 <div>
  54                         <label for="address">Address</label>
  55                         <input id="address" name="address" title="Your home or work address.">
  56                 </div>
  57         </fieldset>
  58 </form>
  59
  60 <div class="demo-description">
  61 <p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p>
  62 <p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
  63 </div>
  64 </body>
  65 </html>