Skip to content

Commit c34a814

Browse files
scottgonzalezscottgonzalez
committed
Tooltip demos: Cleanup.
1 parent e7be72f commit c34a814

File tree

6 files changed

+248
-215
lines changed

6 files changed

+248
-215
lines changed

‎demos/tooltip/custom-animation.html

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4+
<meta charset="utf-8">
45
<title>jQuery UI Tooltip - Custom animation demo</title>
5-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
6-
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
7-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.5.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+
<link rel="stylesheet" href="../demos.css">
13+
<style>
14+
label {
15+
display: inline-block;
16+
width: 5em;
17+
}
18+
</style>
19+
<script>
1320
$(function() {
14-
$(".demo").tooltip({
21+
$( ".demo" ).tooltip({
1522
show: {
1623
effect: "slideDown",
1724
delay: 250
@@ -23,37 +30,29 @@
2330
});
2431
});
2532
</script>
26-
<style>
27-
label { display: inline-block; width: 5em; }
28-
</style>
2933
</head>
3034
<body>
3135

3236
<div class="demo">
3337

34-
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
35-
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
36-
</p>
37-
<p>But as it's not a native tooltip, it can be styled. Any themes built with
38-
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
39-
will also style tooltip's accordingly.</p>
40-
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
41-
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
42-
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
38+
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
39+
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
40+
<p>But as it's not a native tooltip, it can be styled. Any themes built with
41+
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
42+
will also style tooltips accordingly.</p>
43+
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
44+
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
45+
<p>Hover the field to see the tooltip.</p>
4346

4447
</div><!-- End demo -->
4548

4649

4750

4851
<div class="demo-description">
49-
5052
<p>This demo shows how to customize animations. The tooltip is shown, after a
5153
delay of 250ms, using a slide down animation, and hidden, after another delay,
5254
without an animation.</p>
53-
5455
</div><!-- End demo-description -->
5556

56-
57-
5857
</body>
5958
</html>

‎demos/tooltip/default.html

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,47 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<title>jQuery UI Tooltip - Default demo</title>
5-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
6-
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
7-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
4+
<meta charset="utf-8">
5+
<title>jQuery UI Tooltip - Default functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.5.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+
<link rel="stylesheet" href="../demos.css">
13+
<script>
1314
$(function() {
14-
$(".demo").tooltip();
15+
$( ".demo" ).tooltip();
1516
});
1617
</script>
1718
<style>
18-
label { display: inline-block; width: 5em; }
19+
label {
20+
display: inline-block;
21+
width: 5em;
22+
}
1923
</style>
2024
</head>
2125
<body>
2226

2327
<div class="demo">
2428

25-
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
26-
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
27-
</p>
28-
<p>But as it's not a native tooltip, it can be styled. Any themes built with
29-
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
30-
will also style tooltip's accordingly.</p>
31-
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
32-
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
33-
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
29+
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
30+
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
31+
<p>But as it's not a native tooltip, it can be styled. Any themes built with
32+
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
33+
will also style tooltips accordingly.</p>
34+
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
35+
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
36+
<p>Hover the field to see the tooltip.</p>
3437

3538
</div><!-- End demo -->
3639

3740

3841

3942
<div class="demo-description">
40-
4143
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
42-
4344
</div><!-- End demo-description -->
4445

45-
46-
4746
</body>
4847
</html>

‎demos/tooltip/forms.html

Lines changed: 63 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,87 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4+
<meta charset="utf-8">
45
<title>jQuery UI Tooltip - Default demo</title>
5-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
6-
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
7-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<script type="text/javascript">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.5.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>
1429
$(function() {
15-
$("[title]").tooltip().unbind(".tooltip");
16-
$("<button/>").text("Show help").button().toggle(function() {
17-
$(":ui-tooltip").tooltip("open");
18-
}, function() {
19-
$(":ui-tooltip").tooltip("close");
20-
}).appendTo("form");
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();
38+
$( "<button>" )
39+
.text( "Show help" )
40+
.button()
41+
.toggle(
42+
function() {
43+
tooltips.tooltip( "open" );
44+
},
45+
function() {
46+
tooltips.tooltip( "close" );
47+
}
48+
)
49+
.appendTo( "form" );
2150
});
2251
</script>
23-
<style>
24-
label { display: inline-block; width: 5em; }
25-
.ui-icon { display: inline-block; }
26-
fieldset div {
27-
margin-bottom: 2em;
28-
}
29-
.ui-tooltip { width: 210px; }
30-
</style>
3152
</head>
3253
<body>
3354

3455
<div class="demo">
3556

36-
<form>
37-
<fieldset>
38-
<div>
39-
<label for="firstname">Firstname</label>
40-
<input id="firstname" name="firstname" />
41-
<span title="Please provide your firstname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
42-
</div>
43-
<div>
44-
<label for="lastname">Lastname</label>
45-
<input id="lastname" name="lastname" />
46-
<span title="Please provide also your lastname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
47-
</div>
48-
<div>
49-
<label for="address">Address</label>
50-
<input id="address" name="address" />
51-
<span title="Your home or work address." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
52-
</div>
53-
</fieldset>
54-
</form>
57+
<form>
58+
<fieldset>
59+
<div>
60+
<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>
63+
</div>
64+
<div>
65+
<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>
68+
</div>
69+
<div>
70+
<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>
73+
</div>
74+
</fieldset>
75+
</form>
5576

5677
</div><!-- End demo -->
5778

5879

5980

6081
<div class="demo-description">
61-
6282
<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>
63-
6483
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
65-
6684
</div><!-- End demo-description -->
6785

68-
69-
7086
</body>
7187
</html>

‎demos/tooltip/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4+
<meta charset="utf-8">
45
<title>jQuery UI Tooltip Demos</title>
5-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../demos.css">
67
</head>
78
<body>
89

‎demos/tooltip/tracking.html

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<title>jQuery UI Tooltip - Default demo</title>
5-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
6-
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
7-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
4+
<meta charset="utf-8">
5+
<title>jQuery UI Tooltip - Track the mouse</title>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.5.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+
<link rel="stylesheet" href="../demos.css">
13+
<style>
14+
label {
15+
display: inline-block;
16+
width: 5em;
17+
}
18+
</style>
19+
<script>
1320
$(function() {
14-
$(".demo").tooltip({
15-
open: function() {
21+
$( ".demo" ).tooltip({
22+
open: function( event ) {
1623
var tooltip = $( ".ui-tooltip" );
17-
$(document).mousemove(function( event ) {
18-
tooltip.position( {
24+
function position( event ) {
25+
tooltip.position({
1926
my: "left+25 center",
2027
at: "right+25 center",
2128
of: event
2229
});
23-
})
30+
}
31+
$( document ).bind( "mousemove.tooltip-position", position );
2432
// trigger once to override element-relative positioning
25-
.mousemove();
33+
position( event );
2634
},
2735
close: function() {
28-
$(document).unbind( "mousemove" );
36+
$( document ).unbind( "mousemove.tooltip-position" );
2937
}
3038
});
3139
});
3240
</script>
33-
<style>
34-
label { display: inline-block; width: 5em; }
35-
</style>
3641
</head>
3742
<body>
3843

3944
<div class="demo">
4045

41-
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
42-
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
43-
</p>
44-
<p>But as it's not a native tooltip, it can be styled. Any themes built with
45-
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
46-
will also style tooltip's accordingly.</p>
47-
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
48-
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
49-
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
46+
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
47+
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
48+
<p>But as it's not a native tooltip, it can be styled. Any themes built with
49+
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
50+
will also style tooltips accordingly.</p>
51+
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
52+
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
53+
<p>Hover the field to see the tooltip.</p>
5054

5155
</div><!-- End demo -->
5256

5357

5458

5559
<div class="demo-description">
56-
5760
<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
58-
5961
</div><!-- End demo-description -->
6062

61-
62-
6363
</body>
6464
</html>

0 commit comments

Comments
 (0)