Skip to content

Commit f76fbb8

Browse files
committed
Tooltip: Make demos more accessible (and less stupid, in case of the forms demo). Fixes #7842
1 parent 282554e commit f76fbb8

File tree

2 files changed

+13
-26
lines changed

2 files changed

+13
-26
lines changed

demos/tooltip/custom-content.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,11 @@
3030
content: function() {
3131
var element = $( this );
3232
if ( element.is( "[data-geo]" ) ) {
33-
return "<img class='map' src='http://maps.google.com/maps/api/staticmap?" +
33+
var text = element.text();
34+
return "<img class='map' alt='" + text +
35+
"' src='http://maps.google.com/maps/api/staticmap?" +
3436
"zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
35-
element.text() + "'>";
37+
text + "'>";
3638
}
3739
if ( element.is( "[title]" ) ) {
3840
return element.attr( "title" );

demos/tooltip/forms.html

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,26 +27,14 @@
2727
</style>
2828
<script>
2929
$(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();
3831
$( "<button>" )
3932
.text( "Show help" )
4033
.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" );
5038
});
5139
</script>
5240
</head>
@@ -58,18 +46,15 @@
5846
<fieldset>
5947
<div>
6048
<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.">
6350
</div>
6451
<div>
6552
<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.">
6854
</div>
6955
<div>
7056
<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.">
7358
</div>
7459
</fieldset>
7560
</form>
@@ -79,7 +64,7 @@
7964

8065

8166
<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>
8368
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
8469
</div><!-- End demo-description -->
8570

0 commit comments

Comments
 (0)