Skip to content

Commit b02b8e3

Browse files
jzaeffererjzaefferer
committed
Merge branch 'tooltip' into devpreview
2 parents 5d37f63 + 48a5977 commit b02b8e3

File tree

15 files changed

+257
-90
lines changed

15 files changed

+257
-90
lines changed

‎demos/tooltip/ajax/content1.html‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 55 additions & 0 deletions
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.2.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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link type="text/css" href="../demos.css" rel="stylesheet" />
1212
<script type="text/javascript">
1313
$(function() {
14-
$("a, input").tooltip();
14+
$(".demo").tooltip();
1515
});
1616
</script>
1717
<style>

‎demos/tooltip/delegation-mixbag.html‎

Lines changed: 73 additions & 0 deletions
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.2.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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<link type="text/css" href="../demos.css" rel="stylesheet" />
1313
<script type="text/javascript">
1414
$(function() {
15-
$("[title]").tooltip();
15+
$("[title]").tooltip().unbind(".tooltip");
1616
$("<button/>").text("Show help").button().toggle(function() {
1717
$(":ui-tooltip").tooltip("open");
1818
}, function() {
@@ -59,7 +59,7 @@
5959

6060
<div class="demo-description">
6161

62-
<p>Hover the questionmark-buttons or use the button below to display the help texts all at once. Click again to hide them.</p>
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>
6363

6464
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
6565

‎demos/tooltip/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ <h4>Examples</h4>
1212
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
1313
<li><a href="forms.html">Forms with tooltips</a></li>
1414
<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>
1517
</ul>
1618
</div>
1719

‎demos/tooltip/tracking.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link type="text/css" href="../demos.css" rel="stylesheet" />
1212
<script type="text/javascript">
1313
$(function() {
14-
$("a, input").tooltip({
14+
$(".demo").tooltip({
1515
open: function() {
1616
var tooltip = $(this).tooltip("widget");
1717
$(document).mousemove(function(event) {

‎tests/unit/tooltip/tooltip.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
1010
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
1111
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
12+
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
1213
<script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script>
1314

1415
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>

‎tests/unit/tooltip/tooltip_defaults.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
var tooltip_defaults = {
66
disabled: false,
7+
items: "[title]",
78
content: $.ui.tooltip.prototype.options.content,
8-
tooltipClass: "ui-widget-content",
99
position: {
1010
my: "left center",
1111
at: "right center",

0 commit comments

Comments
 (0)