Skip to content
Permalink
Browse files

Tooltip: Implementing event delegation support.

  • Loading branch information...
jzaefferer committed Oct 26, 2010
1 parent bdd815e commit 48a5977d3325869abd7b7ba835eb8ac331fd6eb5
@@ -0,0 +1 @@
<p><strong>This content was loaded via ajax.</strong></p>
@@ -0,0 +1 @@
<p><strong>This other content was loaded via ajax.</strong></p>
@@ -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();
},
@@ -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>
@@ -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>
@@ -13,6 +13,7 @@ <h4>Examples</h4>
<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>

@@ -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) {
@@ -4,6 +4,7 @@

var tooltip_defaults = {
disabled: false,
items: "[title]",
content: $.ui.tooltip.prototype.options.content,
position: {
my: "left center",
@@ -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");
@@ -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" );
@@ -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>
@@ -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;

0 comments on commit 48a5977

Please sign in to comment.
You can’t perform that action at this time.