|
27 | 27 | </style>
|
28 | 28 | <script>
|
29 | 29 | $(function() {
|
30 |
| - var tooltips = $( "[title]" ) |
31 |
| - .click(function() { |
32 |
| - $( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" ); |
33 |
| - }) |
34 |
| - .bind( "mouseover focusin mouseleave blur click", function( event ) { |
35 |
| - event.stopImmediatePropagation(); |
36 |
| - }) |
37 |
| - .tooltip(); |
| 30 | + var tooltips = $( "[title]" ).tooltip(); |
38 | 31 | $( "<button>" )
|
39 | 32 | .text( "Show help" )
|
40 | 33 | .button()
|
41 |
| - .toggle( |
42 |
| - function() { |
43 |
| - tooltips.tooltip( "open" ); |
44 |
| - }, |
45 |
| - function() { |
46 |
| - tooltips.tooltip( "close" ); |
47 |
| - } |
48 |
| - ) |
49 |
| - .appendTo( "form" ); |
| 34 | + .click(function() { |
| 35 | + tooltips.tooltip( "open" ); |
| 36 | + }) |
| 37 | + .insertAfter( "form" ); |
50 | 38 | });
|
51 | 39 | </script>
|
52 | 40 | </head>
|
|
58 | 46 | <fieldset>
|
59 | 47 | <div>
|
60 | 48 | <label for="firstname">Firstname</label>
|
61 |
| - <input id="firstname" name="firstname"> |
62 |
| - <span title="Please provide your firstname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> |
| 49 | + <input id="firstname" name="firstname" title="Please provide your firstname."> |
63 | 50 | </div>
|
64 | 51 | <div>
|
65 | 52 | <label for="lastname">Lastname</label>
|
66 |
| - <input id="lastname" name="lastname"> |
67 |
| - <span title="Please provide also your lastname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> |
| 53 | + <input id="lastname" name="lastname" title="Please provide also your lastname."> |
68 | 54 | </div>
|
69 | 55 | <div>
|
70 | 56 | <label for="address">Address</label>
|
71 |
| - <input id="address" name="address"> |
72 |
| - <span title="Your home or work address." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> |
| 57 | + <input id="address" name="address" title="Your home or work address."> |
73 | 58 | </div>
|
74 | 59 | </fieldset>
|
75 | 60 | </form>
|
|
79 | 64 |
|
80 | 65 |
|
81 | 66 | <div class="demo-description">
|
82 |
| -<p>Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.</p> |
| 67 | +<p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p> |
83 | 68 | <p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
|
84 | 69 | </div><!-- End demo-description -->
|
85 | 70 |
|
|
0 commit comments