diff options
author | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2012-05-09 22:14:34 +0200 |
---|---|---|
committer | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2012-05-09 22:14:55 +0200 |
commit | f76fbb8901e71b38d18735a1223603157689b888 (patch) | |
tree | 6dae2ecfffbd21d97b5834d29ef9602303b4bf5b /demos/tooltip | |
parent | 282554e900f09bba1da197a7d029b9a1a0f4899f (diff) | |
download | jquery-ui-f76fbb8901e71b38d18735a1223603157689b888.tar.gz jquery-ui-f76fbb8901e71b38d18735a1223603157689b888.zip |
Tooltip: Make demos more accessible (and less stupid, in case of the forms demo). Fixes #7842
Diffstat (limited to 'demos/tooltip')
-rw-r--r-- | demos/tooltip/custom-content.html | 6 | ||||
-rw-r--r-- | demos/tooltip/forms.html | 33 |
2 files changed, 13 insertions, 26 deletions
diff --git a/demos/tooltip/custom-content.html b/demos/tooltip/custom-content.html index d6ce27f69..3b3308153 100644 --- a/demos/tooltip/custom-content.html +++ b/demos/tooltip/custom-content.html @@ -30,9 +30,11 @@ content: function() { var element = $( this ); if ( element.is( "[data-geo]" ) ) { - return "<img class='map' src='http://maps.google.com/maps/api/staticmap?" + + var text = element.text(); + return "<img class='map' alt='" + text + + "' src='http://maps.google.com/maps/api/staticmap?" + "zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" + - element.text() + "'>"; + text + "'>"; } if ( element.is( "[title]" ) ) { return element.attr( "title" ); diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html index ec01396a7..6440bf89e 100644 --- a/demos/tooltip/forms.html +++ b/demos/tooltip/forms.html @@ -27,26 +27,14 @@ </style> <script> $(function() { - var tooltips = $( "[title]" ) - .click(function() { - $( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" ); - }) - .bind( "mouseover focusin mouseleave blur click", function( event ) { - event.stopImmediatePropagation(); - }) - .tooltip(); + var tooltips = $( "[title]" ).tooltip(); $( "<button>" ) .text( "Show help" ) .button() - .toggle( - function() { - tooltips.tooltip( "open" ); - }, - function() { - tooltips.tooltip( "close" ); - } - ) - .appendTo( "form" ); + .click(function() { + tooltips.tooltip( "open" ); + }) + .insertAfter( "form" ); }); </script> </head> @@ -58,18 +46,15 @@ <fieldset> <div> <label for="firstname">Firstname</label> - <input id="firstname" name="firstname"> - <span title="Please provide your firstname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> + <input id="firstname" name="firstname" title="Please provide your firstname."> </div> <div> <label for="lastname">Lastname</label> - <input id="lastname" name="lastname"> - <span title="Please provide also your lastname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> + <input id="lastname" name="lastname" title="Please provide also your lastname."> </div> <div> <label for="address">Address</label> - <input id="address" name="address"> - <span title="Your home or work address." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> + <input id="address" name="address" title="Your home or work address."> </div> </fieldset> </form> @@ -79,7 +64,7 @@ <div class="demo-description"> -<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> +<p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p> <p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p> </div><!-- End demo-description --> |