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">
16 display: inline-block; width: 5em;
22 display: inline-block;
30 var tooltips = $( "[title]" ).tooltip();
35 tooltips.tooltip( "open" );
37 .insertAfter( "form" );
46 <label for="firstname">Firstname</label>
47 <input id="firstname" name="firstname" title="Please provide your firstname.">
50 <label for="lastname">Lastname</label>
51 <input id="lastname" name="lastname" title="Please provide also your lastname.">
54 <label for="address">Address</label>
55 <input id="address" name="address" title="Your home or work address.">
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>