Skip to content

Commit 0479ab6

Browse files
jzaeffererjzaefferer
committed
Merge remote branch 'origin/tooltip'
Conflicts: demos/autocomplete/combobox.html demos/index.html tests/unit/index.html
2 parents 3552947 + 1fd3419 commit 0479ab6

28 files changed

+1164
-27
lines changed

‎build/build.xml

+1
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@
271271
<get src="${url}Dialog" dest="${docs.dir}dialog.html" />
272272
<get src="${url}Progressbar" dest="${docs.dir}progressbar.html" />
273273
<get src="${url}Slider" dest="${docs.dir}slider.html" />
274+
<get src="${url}Tooltip" dest="${docs.dir}tooltip.html" />
274275
<get src="${url}Tabs" dest="${docs.dir}tabs.html" />
275276

276277
<get src="${url}Position" dest="${docs.dir}position.html" />

‎demos/autocomplete/combobox.html

+11-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="../../ui/jquery.ui.position.js"></script>
1212
<script src="../../ui/jquery.ui.menu.js"></script>
1313
<script src="../../ui/jquery.ui.autocomplete.js"></script>
14+
<script src="../../ui/jquery.ui.tooltip.js"></script>
1415
<link rel="stylesheet" href="../demos.css">
1516
<style>
1617
.ui-button { margin-left: -1px; }
@@ -66,8 +67,10 @@
6667
});
6768
if ( !valid ) {
6869
// remove invalid value, as it didn't match anything
69-
$( this ).val( "" );
70-
select.val( "" );
70+
$(this).val( "").attr( "title", value + " didn't match any item" ).tooltip( "open" );
71+
setTimeout( function() {
72+
input.tooltip( "close" ).attr( "title", "" );
73+
}, 2500 );
7174
input.data( "autocomplete" ).term = "";
7275
return false;
7376
}
@@ -106,6 +109,12 @@
106109
input.autocomplete( "search", "" );
107110
input.focus();
108111
});
112+
113+
input.tooltip( {
114+
position: {
115+
offset: (this.button.width() + 5) + " 0"
116+
}
117+
}).tooltip( "widget" ).addClass( "ui-state-highlight" );
109118
},
110119

111120
destroy: function() {

‎demos/index.html

+2
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<script src="../ui/jquery.ui.sortable.js"></script>
2929
<script src="../ui/jquery.ui.spinner.js"></script>
3030
<script src="../ui/jquery.ui.tabs.js"></script>
31+
<script src="../ui/jquery.ui.tooltip.js"></script>
3132
<script src="../ui/jquery.effects.core.js"></script>
3233
<script src="../ui/jquery.effects.blind.js"></script>
3334
<script src="../ui/jquery.effects.bounce.js"></script>
@@ -276,6 +277,7 @@
276277
<dd><a href="slider/index.html">Slider</a></dd>
277278
<dd><a href="spinner/index.html">Spinner</a></dd>
278279
<dd><a href="tabs/index.html">Tabs</a></dd>
280+
<dd><a href="tooltip/index.html">Tooltip</a></dd>
279281
<dt>Effects</dt>
280282
<dd><a href="animate/index.html">Color Animation</a></dd>
281283
<dd><a href="toggleClass/index.html">Toggle Class</a></dd>

‎demos/tooltip/ajax/content1.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p><strong>This content was loaded via ajax.</strong></p>

‎demos/tooltip/ajax/content2.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p><strong>This other content was loaded via ajax.</strong></p>

‎demos/tooltip/custom-animation.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<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.4.4.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">
13+
$(function() {
14+
$(".demo").tooltip({
15+
open: function() {
16+
$(this).tooltip("widget").stop(false, true).hide().slideDown();
17+
},
18+
close: function() {
19+
$(this).tooltip("widget").stop(false, true).show().slideUp();
20+
}
21+
});
22+
});
23+
</script>
24+
<style>
25+
label { display: inline-block; width: 5em; }
26+
</style>
27+
</head>
28+
<body>
29+
30+
<div class="demo">
31+
32+
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
33+
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
34+
</p>
35+
<p>But as it's not a native tooltip, it can be styled. Any themes built with
36+
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
37+
will also style tooltip's accordingly.</p>
38+
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
39+
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
40+
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
41+
42+
</div><!-- End demo -->
43+
44+
45+
46+
<div class="demo-description">
47+
48+
<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
49+
50+
</div><!-- End demo-description -->
51+
52+
53+
54+
</body>
55+
</html>

‎demos/tooltip/default.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<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.4.4.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">
13+
$(function() {
14+
$(".demo").tooltip();
15+
});
16+
</script>
17+
<style>
18+
label { display: inline-block; width: 5em; }
19+
</style>
20+
</head>
21+
<body>
22+
23+
<div class="demo">
24+
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>
34+
35+
</div><!-- End demo -->
36+
37+
38+
39+
<div class="demo-description">
40+
41+
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
42+
43+
</div><!-- End demo-description -->
44+
45+
46+
47+
</body>
48+
</html>

‎demos/tooltip/delegation-mixbag.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<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.4.4.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">
13+
$(function() {
14+
$(".demo").tooltip({
15+
items: "[href], [title]",
16+
content: function(response) {
17+
var href = $(this).attr("href");
18+
if (/^#/.test(href)) {
19+
return $(href).html();
20+
} else if (href) {
21+
$.get(href, response);
22+
return "loading...";
23+
}
24+
return this.title;
25+
}
26+
});
27+
$("#footnotes").hide();
28+
});
29+
</script>
30+
<style>
31+
label { display: inline-block; width: 5em; }
32+
</style>
33+
</head>
34+
<body>
35+
36+
<div class="demo">
37+
<ul>
38+
<li>
39+
<a href="#footnote1">I'm a link to a footnote.</a>
40+
</li>
41+
<li>
42+
<a href="#footnote2">I'm another link to a footnote.</a>
43+
</li>
44+
</ul>
45+
<input title="This is just an input, nothing special" />
46+
47+
<ul>
48+
<li>
49+
<a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a>
50+
</li>
51+
<li>
52+
<a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a>
53+
</li>
54+
</ul>
55+
56+
<div id="footnotes">
57+
<div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
58+
<div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
59+
</div>
60+
</div><!-- End demo -->
61+
62+
63+
64+
<div class="demo-description">
65+
66+
<p>Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
67+
68+
</div><!-- End demo-description -->
69+
70+
71+
72+
</body>
73+
</html>

‎demos/tooltip/forms.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<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.4.4.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">
14+
$(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");
21+
});
22+
</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>
31+
</head>
32+
<body>
33+
34+
<div class="demo">
35+
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>
55+
56+
</div><!-- End demo -->
57+
58+
59+
60+
<div class="demo-description">
61+
62+
<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+
64+
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
65+
66+
</div><!-- End demo-description -->
67+
68+
69+
70+
</body>
71+
</html>

‎demos/tooltip/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Tooltip Demos</title>
5+
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
<li><a href="forms.html">Forms with tooltips</a></li>
14+
<li><a href="tracking.html">Track the mouse</a></li>
15+
<li><a href="custom-animation.html">Custom animation</a></li>
16+
<li><a href="delegation-mixbag.html">Delegation Mixbag</a></li>
17+
</ul>
18+
</div>
19+
20+
</body>
21+
</html>

0 commit comments

Comments
 (0)