library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tooltip: Implementing event delegation support.

Browse Source
This commit is contained in:
jzaefferer 2010-10-26 17:07:22 +02:00
parent bdd815e8dc
commit 48a5977d33
12 changed files with 116 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demos/tooltip/ajax/content1.html Normal file
View File

@ -0,0 +1 @@
<p><strong>This content was loaded via ajax.</strong></p>

1
demos/tooltip/ajax/content2.html Normal file
View File

@ -0,0 +1 @@
<p><strong>This other content was loaded via ajax.</strong></p>

2
demos/tooltip/custom-animation.html
View File

@ -11,7 +11,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("a, input").tooltip({ $(".demo").tooltip({
open: function() { open: function() {
$(this).tooltip("widget").stop(false, true).hide().slideDown(); $(this).tooltip("widget").stop(false, true).hide().slideDown();
}, },

2
demos/tooltip/default.html
View File

@ -11,7 +11,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("a, input").tooltip(); $(".demo").tooltip();
}); });
</script> </script>
<style> <style>

73
demos/tooltip/delegation-mixbag.html Normal file
View File

@ -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>

1
demos/tooltip/index.html
View File

@ -13,6 +13,7 @@
<li><a href="forms.html">Forms with tooltips</a></li> <li><a href="forms.html">Forms with tooltips</a></li>
<li><a href="tracking.html">Track the mouse</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="custom-animation.html">Custom animation</a></li>
<li><a href="delegation-mixbag.html">Delegation Mixbag</a></li>
</ul> </ul>
</div> </div>

2
demos/tooltip/tracking.html
View File

@ -11,7 +11,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("a, input").tooltip({ $(".demo").tooltip({
open: function() { open: function() {
var tooltip = $(this).tooltip("widget"); var tooltip = $(this).tooltip("widget");
$(document).mousemove(function(event) { $(document).mousemove(function(event) {

1
tests/unit/tooltip/tooltip_defaults.js
View File

@ -4,6 +4,7 @@
var tooltip_defaults = { var tooltip_defaults = {
disabled: false, disabled: false,
items: "[title]",
content: $.ui.tooltip.prototype.options.content, content: $.ui.tooltip.prototype.options.content,
position: { position: {
my: "left center", my: "left center",

4
tests/unit/tooltip/tooltip_events.js
View File

@ -24,11 +24,11 @@ test("mouse events", function() {
var e = $("#tooltipped1").tooltip({ var e = $("#tooltipped1").tooltip({
open: function(event, ui) { open: function(event, ui) {
same( event.type, "tooltipopen" ); same( event.type, "tooltipopen" );
same( event.originalEvent.type, "mouseenter" ); same( event.originalEvent.type, "mouseover" );
}, },
close: function(event, ui) { close: function(event, ui) {
same( event.type, "tooltipclose" ); same( event.type, "tooltipclose" );
same( event.originalEvent.type, "mouseleave" ); same( event.originalEvent.type, "mouseout" );
} }
}); });
e.trigger("mouseover").trigger("mouseout"); e.trigger("mouseover").trigger("mouseout");

5
tests/unit/tooltip/tooltip_options.js
View File

@ -9,6 +9,11 @@ module("tooltip: options", {
} }
}); });
test("option: items", function() {
ok(false, "missing items test");
});
test("content: default", function() { test("content: default", function() {
$("#tooltipped1").tooltip().tooltip("open"); $("#tooltipped1").tooltip().tooltip("open");
same( $(".ui-tooltip").text(), "anchortitle" ); same( $(".ui-tooltip").text(), "anchortitle" );

45
tests/visual/tooltip/tooltip.html
View File

@ -21,16 +21,17 @@
function enable() { function enable() {
// default // default
$("#context1 a, form input, #childish").tooltip(); $("#context1, form, #childish").tooltip();
// custom class, replaces ui-widget-content // custom class, replaces ui-widget-content
$("#context2 [title]").tooltip().each(function() { $("#context2").tooltip().each(function() {
$(this).tooltip("widget").addClass("ui-widget-header"); $(this).tooltip("widget").addClass("ui-widget-header");
}) })
$("#right1").tooltip().tooltip("widget").addClass("ui-state-error"); $("#right1").tooltip().tooltip("widget").addClass("ui-state-error");
// synchronous content // synchronous content
$("#see-footnote").tooltip({ $("#footnotes").tooltip({
items: "[href^=#]",
content: function() { content: function() {
return $($(this).attr("href")).html(); return $($(this).attr("href")).html();
} }
@ -70,25 +71,25 @@
} }
}).tooltip("widget").addClass("ui-state-highlight"); }).tooltip("widget").addClass("ui-state-highlight");
var positionOnTop = { $("#button1").button();
position: {
my: "center bottom",
at: "center top",
offset: "0 -5"
}
};
$("#button1").button().tooltip(positionOnTop);
$("#button2").button({ $("#button2").button({
icons: { icons: {
primary: "ui-icon-wrench" primary: "ui-icon-wrench"
} }
}).tooltip(positionOnTop); });
$("#button3, #button4").button({ $("#button3, #button4").button({
icons: { icons: {
primary: "ui-icon-wrench" primary: "ui-icon-wrench"
}, },
text: false text: false
}).tooltip(positionOnTop); });
$("#buttons").tooltip({
position: {
my: "center bottom",
at: "center top",
offset: "0 -5"
}
});
} }
enable(); enable();
@ -121,8 +122,9 @@
collision detection should kick in around here collision detection should kick in around here
</div> </div>
<div style="margin: 2em 0"> <div id="footnotes" style="margin: 2em 0">
<a id="see-footnote" href="#footnote">I'm a link to a footnote.</a> <a href="#footnote1">I'm a link to a footnote.</a>
<a href="#footnote2">I'm another link to a footnote.</a>
</div> </div>
<div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position"> <div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position">
@ -159,12 +161,15 @@
</div> </div>
</form> </form>
<button id="button1" title="Button Tooltip">Button Label</button> <div id="buttons">
<button id="button2" title="Icon Button">Button with Icon</button> <button id="button1" title="Button Tooltip">Button Label</button>
<button id="button3">Icon Only Button 1</button> <button id="button2" title="Icon Button">Button with Icon</button>
<button id="button4">Icon Only Button 2</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="disable">Toggle disabled</button>
<button id="toggle">Toggle widget</button> <button id="toggle">Toggle widget</button>

7
ui/jquery.ui.tooltip.js vendored
View File

@ -18,6 +18,7 @@ var increments = 0;
$.widget("ui.tooltip", { $.widget("ui.tooltip", {
options: { options: {
items: "[title]",
content: function() { content: function() {
return $(this).attr("title"); return $(this).attr("title");
}, },
@ -41,10 +42,10 @@ $.widget("ui.tooltip", {
.appendTo(this.tooltip); .appendTo(this.tooltip);
this.opacity = this.tooltip.css("opacity"); this.opacity = this.tooltip.css("opacity");
this.element this.element
.bind("focus.tooltip mouseenter.tooltip", function(event) { .bind("focus.tooltip mouseover.tooltip", function(event) {
self.open( event ); self.open( event );
}) })
.bind("blur.tooltip mouseleave.tooltip", function(event) { .bind("blur.tooltip mouseout.tooltip", function(event) {
self.close( event ); self.close( event );
}); });
}, },
@ -67,7 +68,7 @@ $.widget("ui.tooltip", {
}, },
open: function(event) { 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 // already visible? possible when both focus and mouseover events occur
if (this.current && this.current[0] == target[0]) if (this.current && this.current[0] == target[0])
return; return;