Skip to content

Commit 48a5977

Browse files
jzaeffererjzaefferer
committed
Tooltip: Implementing event delegation support.
1 parent bdd815e commit 48a5977

File tree

12 files changed

+116
-28
lines changed

12 files changed

+116
-28
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: 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
$(this).tooltip("widget").stop(false, true).hide().slideDown();
1717
},

‎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/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ <h4>Examples</h4>
1313
<li><a href="forms.html">Forms with tooltips</a></li>
1414
<li><a href="tracking.html">Track the mouse</a></li>
1515
<li><a href="custom-animation.html">Custom animation</a></li>
16+
<li><a href="delegation-mixbag.html">Delegation Mixbag</a></li>
1617
</ul>
1718
</div>
1819

‎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_defaults.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
var tooltip_defaults = {
66
disabled: false,
7+
items: "[title]",
78
content: $.ui.tooltip.prototype.options.content,
89
position: {
910
my: "left 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_options.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ module("tooltip: options", {
99
}
1010
});
1111

12+
13+
test("option: items", function() {
14+
ok(false, "missing items test");
15+
});
16+
1217
test("content: default", function() {
1318
$("#tooltipped1").tooltip().tooltip("open");
1419
same( $(".ui-tooltip").text(), "anchortitle" );

‎tests/visual/tooltip/tooltip.html

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,17 @@
2121

2222
function enable() {
2323
// default
24-
$("#context1 a, form input, #childish").tooltip();
24+
$("#context1, form, #childish").tooltip();
2525

2626
// custom class, replaces ui-widget-content
27-
$("#context2 [title]").tooltip().each(function() {
27+
$("#context2").tooltip().each(function() {
2828
$(this).tooltip("widget").addClass("ui-widget-header");
2929
})
3030
$("#right1").tooltip().tooltip("widget").addClass("ui-state-error");
3131

3232
// synchronous content
33-
$("#see-footnote").tooltip({
33+
$("#footnotes").tooltip({
34+
items: "[href^=#]",
3435
content: function() {
3536
return $($(this).attr("href")).html();
3637
}
@@ -70,25 +71,25 @@
7071
}
7172
}).tooltip("widget").addClass("ui-state-highlight");
7273

73-
var positionOnTop = {
74-
position: {
75-
my: "center bottom",
76-
at: "center top",
77-
offset: "0 -5"
78-
}
79-
};
80-
$("#button1").button().tooltip(positionOnTop);
74+
$("#button1").button();
8175
$("#button2").button({
8276
icons: {
8377
primary: "ui-icon-wrench"
8478
}
85-
}).tooltip(positionOnTop);
79+
});
8680
$("#button3, #button4").button({
8781
icons: {
8882
primary: "ui-icon-wrench"
8983
},
9084
text: false
91-
}).tooltip(positionOnTop);
85+
});
86+
$("#buttons").tooltip({
87+
position: {
88+
my: "center bottom",
89+
at: "center top",
90+
offset: "0 -5"
91+
}
92+
});
9293
}
9394
enable();
9495

@@ -121,8 +122,9 @@
121122
collision detection should kick in around here
122123
</div>
123124

124-
<div style="margin: 2em 0">
125-
<a id="see-footnote" href="#footnote">I'm a link to a footnote.</a>
125+
<div id="footnotes" style="margin: 2em 0">
126+
<a href="#footnote1">I'm a link to a footnote.</a>
127+
<a href="#footnote2">I'm another link to a footnote.</a>
126128
</div>
127129

128130
<div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position">
@@ -159,12 +161,15 @@
159161
</div>
160162
</form>
161163

162-
<button id="button1" title="Button Tooltip">Button Label</button>
163-
<button id="button2" title="Icon Button">Button with Icon</button>
164-
<button id="button3">Icon Only Button 1</button>
165-
<button id="button4">Icon Only Button 2</button>
164+
<div id="buttons">
165+
<button id="button1" title="Button Tooltip">Button Label</button>
166+
<button id="button2" title="Icon Button">Button with Icon</button>
167+
<button id="button3">Icon Only Button 1</button>
168+
<button id="button4">Icon Only Button 2</button>
169+
</div>
166170

167-
<div id="footnote">This is <strong>the</strong> footnote, including other elements</div>
171+
<div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
172+
<div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
168173

169174
<button id="disable">Toggle disabled</button>
170175
<button id="toggle">Toggle widget</button>

‎ui/jquery.ui.tooltip.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ var increments = 0;
1818

1919
$.widget("ui.tooltip", {
2020
options: {
21+
items: "[title]",
2122
content: function() {
2223
return $(this).attr("title");
2324
},
@@ -41,10 +42,10 @@ $.widget("ui.tooltip", {
4142
.appendTo(this.tooltip);
4243
this.opacity = this.tooltip.css("opacity");
4344
this.element
44-
.bind("focus.tooltip mouseenter.tooltip", function(event) {
45+
.bind("focus.tooltip mouseover.tooltip", function(event) {
4546
self.open( event );
4647
})
47-
.bind("blur.tooltip mouseleave.tooltip", function(event) {
48+
.bind("blur.tooltip mouseout.tooltip", function(event) {
4849
self.close( event );
4950
});
5051
},
@@ -67,7 +68,7 @@ $.widget("ui.tooltip", {
6768
},
6869

6970
open: function(event) {
70-
var target = this.element;
71+
var target = $(event && event.target || this.element).closest(this.options.items);
7172
// already visible? possible when both focus and mouseover events occur
7273
if (this.current && this.current[0] == target[0])
7374
return;

0 commit comments

Comments
 (0)