aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--demos/tooltip/ajax/content1.html1
-rw-r--r--demos/tooltip/ajax/content2.html1
-rw-r--r--demos/tooltip/custom-animation.html2
-rw-r--r--demos/tooltip/default.html2
-rw-r--r--demos/tooltip/delegation-mixbag.html73
-rw-r--r--demos/tooltip/index.html1
-rw-r--r--demos/tooltip/tracking.html2
-rw-r--r--tests/unit/tooltip/tooltip_defaults.js1
-rw-r--r--tests/unit/tooltip/tooltip_events.js4
-rw-r--r--tests/unit/tooltip/tooltip_options.js5
-rw-r--r--tests/visual/tooltip/tooltip.html45
-rw-r--r--ui/jquery.ui.tooltip.js7
12 files changed, 116 insertions, 28 deletions
diff --git a/demos/tooltip/ajax/content1.html b/demos/tooltip/ajax/content1.html
new file mode 100644
index 000000000..a1401b26d
--- /dev/null
+++ b/demos/tooltip/ajax/content1.html
@@ -0,0 +1 @@
+<p><strong>This content was loaded via ajax.</strong></p> \ No newline at end of file
diff --git a/demos/tooltip/ajax/content2.html b/demos/tooltip/ajax/content2.html
new file mode 100644
index 000000000..f4132d731
--- /dev/null
+++ b/demos/tooltip/ajax/content2.html
@@ -0,0 +1 @@
+<p><strong>This other content was loaded via ajax.</strong></p> \ No newline at end of file
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html
index 585360d7c..1353e3b91 100644
--- a/demos/tooltip/custom-animation.html
+++ b/demos/tooltip/custom-animation.html
@@ -11,7 +11,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $("a, input").tooltip({
+ $(".demo").tooltip({
open: function() {
$(this).tooltip("widget").stop(false, true).hide().slideDown();
},
diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html
index 22dac4f90..59a32311f 100644
--- a/demos/tooltip/default.html
+++ b/demos/tooltip/default.html
@@ -11,7 +11,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $("a, input").tooltip();
+ $(".demo").tooltip();
});
</script>
<style>
diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html
new file mode 100644
index 000000000..45548433d
--- /dev/null
+++ b/demos/tooltip/delegation-mixbag.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Tooltip - Default demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $(".demo").tooltip({
+ items: "[href], [title]",
+ content: function(response) {
+ var href = $(this).attr("href");
+ if (/^#/.test(href)) {
+ return $(href).html();
+ } else if (href) {
+ $.get(href, response);
+ return "loading...";
+ }
+ return this.title;
+ }
+ });
+ $("#footnotes").hide();
+ });
+ </script>
+ <style>
+ label { display: inline-block; width: 5em; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+ <ul>
+ <li>
+ <a href="#footnote1">I'm a link to a footnote.</a>
+ </li>
+ <li>
+ <a href="#footnote2">I'm another link to a footnote.</a>
+ </li>
+ </ul>
+ <input title="This is just an input, nothing special" />
+
+ <ul>
+ <li>
+ <a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a>
+ </li>
+ <li>
+ <a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a>
+ </li>
+ </ul>
+
+ <div id="footnotes">
+ <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
+ <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
+ </div>
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html
index e55575d4c..6bc9c1e5c 100644
--- a/demos/tooltip/index.html
+++ b/demos/tooltip/index.html
@@ -13,6 +13,7 @@
<li><a href="forms.html">Forms with tooltips</a></li>
<li><a href="tracking.html">Track the mouse</a></li>
<li><a href="custom-animation.html">Custom animation</a></li>
+ <li><a href="delegation-mixbag.html">Delegation Mixbag</a></li>
</ul>
</div>
diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html
index 9af4d0d09..286f01209 100644
--- a/demos/tooltip/tracking.html
+++ b/demos/tooltip/tracking.html
@@ -11,7 +11,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $("a, input").tooltip({
+ $(".demo").tooltip({
open: function() {
var tooltip = $(this).tooltip("widget");
$(document).mousemove(function(event) {
diff --git a/tests/unit/tooltip/tooltip_defaults.js b/tests/unit/tooltip/tooltip_defaults.js
index c9960d334..419d7a085 100644
--- a/tests/unit/tooltip/tooltip_defaults.js
+++ b/tests/unit/tooltip/tooltip_defaults.js
@@ -4,6 +4,7 @@
var tooltip_defaults = {
disabled: false,
+ items: "[title]",
content: $.ui.tooltip.prototype.options.content,
position: {
my: "left center",
diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js
index 51c56b62e..35620df47 100644
--- a/tests/unit/tooltip/tooltip_events.js
+++ b/tests/unit/tooltip/tooltip_events.js
@@ -24,11 +24,11 @@ test("mouse events", function() {
var e = $("#tooltipped1").tooltip({
open: function(event, ui) {
same( event.type, "tooltipopen" );
- same( event.originalEvent.type, "mouseenter" );
+ same( event.originalEvent.type, "mouseover" );
},
close: function(event, ui) {
same( event.type, "tooltipclose" );
- same( event.originalEvent.type, "mouseleave" );
+ same( event.originalEvent.type, "mouseout" );
}
});
e.trigger("mouseover").trigger("mouseout");
diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js
index 99d582489..6962d1e86 100644
--- a/tests/unit/tooltip/tooltip_options.js
+++ b/tests/unit/tooltip/tooltip_options.js
@@ -9,6 +9,11 @@ module("tooltip: options", {
}
});
+
+test("option: items", function() {
+ ok(false, "missing items test");
+});
+
test("content: default", function() {
$("#tooltipped1").tooltip().tooltip("open");
same( $(".ui-tooltip").text(), "anchortitle" );
diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html
index 1e2832e34..6d4e15c9e 100644
--- a/tests/visual/tooltip/tooltip.html
+++ b/tests/visual/tooltip/tooltip.html
@@ -21,16 +21,17 @@
function enable() {
// default
- $("#context1 a, form input, #childish").tooltip();
+ $("#context1, form, #childish").tooltip();
// custom class, replaces ui-widget-content
- $("#context2 [title]").tooltip().each(function() {
+ $("#context2").tooltip().each(function() {
$(this).tooltip("widget").addClass("ui-widget-header");
})
$("#right1").tooltip().tooltip("widget").addClass("ui-state-error");
// synchronous content
- $("#see-footnote").tooltip({
+ $("#footnotes").tooltip({
+ items: "[href^=#]",
content: function() {
return $($(this).attr("href")).html();
}
@@ -70,25 +71,25 @@
}
}).tooltip("widget").addClass("ui-state-highlight");
- var positionOnTop = {
- position: {
- my: "center bottom",
- at: "center top",
- offset: "0 -5"
- }
- };
- $("#button1").button().tooltip(positionOnTop);
+ $("#button1").button();
$("#button2").button({
icons: {
primary: "ui-icon-wrench"
}
- }).tooltip(positionOnTop);
+ });
$("#button3, #button4").button({
icons: {
primary: "ui-icon-wrench"
},
text: false
- }).tooltip(positionOnTop);
+ });
+ $("#buttons").tooltip({
+ position: {
+ my: "center bottom",
+ at: "center top",
+ offset: "0 -5"
+ }
+ });
}
enable();
@@ -121,8 +122,9 @@
collision detection should kick in around here
</div>
- <div style="margin: 2em 0">
- <a id="see-footnote" href="#footnote">I'm a link to a footnote.</a>
+ <div id="footnotes" style="margin: 2em 0">
+ <a href="#footnote1">I'm a link to a footnote.</a>
+ <a href="#footnote2">I'm another link to a footnote.</a>
</div>
<div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position">
@@ -159,12 +161,15 @@
</div>
</form>
- <button id="button1" title="Button Tooltip">Button Label</button>
- <button id="button2" title="Icon Button">Button with Icon</button>
- <button id="button3">Icon Only Button 1</button>
- <button id="button4">Icon Only Button 2</button>
+ <div id="buttons">
+ <button id="button1" title="Button Tooltip">Button Label</button>
+ <button id="button2" title="Icon Button">Button with Icon</button>
+ <button id="button3">Icon Only Button 1</button>
+ <button id="button4">Icon Only Button 2</button>
+ </div>
- <div id="footnote">This is <strong>the</strong> footnote, including other elements</div>
+ <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
+ <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
<button id="disable">Toggle disabled</button>
<button id="toggle">Toggle widget</button>
diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js
index 91c60d603..122652bb0 100644
--- a/ui/jquery.ui.tooltip.js
+++ b/ui/jquery.ui.tooltip.js
@@ -18,6 +18,7 @@ var increments = 0;
$.widget("ui.tooltip", {
options: {
+ items: "[title]",
content: function() {
return $(this).attr("title");
},
@@ -41,10 +42,10 @@ $.widget("ui.tooltip", {
.appendTo(this.tooltip);
this.opacity = this.tooltip.css("opacity");
this.element
- .bind("focus.tooltip mouseenter.tooltip", function(event) {
+ .bind("focus.tooltip mouseover.tooltip", function(event) {
self.open( event );
})
- .bind("blur.tooltip mouseleave.tooltip", function(event) {
+ .bind("blur.tooltip mouseout.tooltip", function(event) {
self.close( event );
});
},
@@ -67,7 +68,7 @@ $.widget("ui.tooltip", {
},
open: function(event) {
- var target = this.element;
+ var target = $(event && event.target || this.element).closest(this.options.items);
// already visible? possible when both focus and mouseover events occur
if (this.current && this.current[0] == target[0])
return;
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 02:32:08 +0000