Skip to content

Commit b02b8e3

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

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",

‎tests/unit/tooltip/tooltip_events.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ test("mouse events", function() {
2424
var e = $("#tooltipped1").tooltip({
2525
open: function(event, ui) {
2626
same( event.type, "tooltipopen" );
27-
same( event.originalEvent.type, "mouseenter" );
27+
same( event.originalEvent.type, "mouseover" );
2828
},
2929
close: function(event, ui) {
3030
same( event.type, "tooltipclose" );
31-
same( event.originalEvent.type, "mouseleave" );
31+
same( event.originalEvent.type, "mouseout" );
3232
}
3333
});
3434
e.trigger("mouseover").trigger("mouseout");

‎tests/unit/tooltip/tooltip_methods.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,11 @@ test("open", function() {
2020
$(":ui-tooltip").tooltip("destroy");
2121
});
2222

23+
test("widget", function() {
24+
var tooltip = $("#tooltipped1").tooltip();
25+
same(tooltip.tooltip("widget")[0], $(".ui-tooltip")[0]);
26+
same(tooltip.tooltip("widget").end()[0], tooltip[0]);
27+
});
28+
29+
2330
})(jQuery);

‎tests/unit/tooltip/tooltip_options.js

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,52 @@
33
*/
44
(function($) {
55

6-
module("tooltip: options");
7-
8-
function contentTest(name, expected, impl) {
9-
test(name, function() {
10-
$("#tooltipped1").tooltip({
11-
content: impl
12-
}).tooltip("open");
13-
same( $(".ui-tooltip").text(), expected );
6+
module("tooltip: options", {
7+
teardown: function() {
148
$(":ui-tooltip").tooltip("destroy");
15-
});
16-
}
17-
18-
contentTest("content: default", "anchortitle");
19-
contentTest("content: return string", "customstring", function() {
20-
return "customstring";
9+
}
2110
});
22-
contentTest("content: callback string", "customstring2", function(response) {
23-
response("customstring2");
11+
12+
13+
test("option: items", function() {
14+
ok(false, "missing items test");
2415
});
2516

26-
test("tooltipClass, default", function() {
17+
test("content: default", function() {
2718
$("#tooltipped1").tooltip().tooltip("open");
28-
same( $(".ui-tooltip").attr("class"), "ui-tooltip ui-widget ui-corner-all ui-widget-content");
29-
$(":ui-tooltip").tooltip("destroy");
19+
same( $(".ui-tooltip").text(), "anchortitle" );
20+
});
21+
22+
test("content: return string", function() {
23+
$("#tooltipped1").tooltip({
24+
content: function() {
25+
return "customstring";
26+
}
27+
}).tooltip("open");
28+
same( $(".ui-tooltip").text(), "customstring" );
29+
});
30+
31+
test("content: return jQuery", function() {
32+
$("#tooltipped1").tooltip({
33+
content: function() {
34+
return $("<div></div>").html("cu<b>s</b>tomstring");
35+
}
36+
}).tooltip("open");
37+
same( $(".ui-tooltip").text(), "customstring" );
3038
});
31-
test("tooltipClass, custom", function() {
39+
40+
test("content: callback string", function() {
41+
stop();
3242
$("#tooltipped1").tooltip({
33-
tooltipClass: "pretty fancy"
43+
content: function(response) {
44+
response("customstring2");
45+
setTimeout(function() {
46+
same( $(".ui-tooltip").text(), "customstring2" );
47+
start();
48+
}, 100)
49+
}
3450
}).tooltip("open");
35-
same( $(".ui-tooltip").attr("class"), "ui-tooltip ui-widget ui-corner-all pretty fancy");
36-
$(":ui-tooltip").tooltip("destroy");
51+
3752
});
3853

3954
})(jQuery);

0 commit comments

Comments
 (0)