Tooltip demos: Cleanup.

author: Scott González <scott.gonzalez@gmail.com> 2011-05-27 20:52:13 -0400
committer: Scott González <scott.gonzalez@gmail.com> 2011-05-27 20:52:13 -0400
commit: c34a814a4b140a0b6a7610874d7918eb3a1e01a3 (patch)
tree: 8f08044088727227bacfcf4638d5e3d054bc96dc /demos/tooltip
parent: e7be72ff06d4152245a674c37abc7e8577bfc7a1 (diff)
download: jquery-ui-c34a814a4b140a0b6a7610874d7918eb3a1e01a3.tar.gz
jquery-ui-c34a814a4b140a0b6a7610874d7918eb3a1e01a3.zip
6 files changed, 248 insertions, 215 deletions
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html
index ef8857979..23fa9aefe 100644
--- a/demos/tooltip/custom-animation.html
+++ b/demos/tooltip/custom-animation.html
@@ -1,17 +1,24 @@
 <!doctype html>
 <html lang="en">
 <head>
+	<meta charset="utf-8">
 	<title>jQuery UI Tooltip - Custom animation demo</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.5.1.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">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.1.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	label {
+		display: inline-block;
+		width: 5em;
+	}
+	</style>
+	<script>
 	$(function() {
-		$(".demo").tooltip({
+		$( ".demo" ).tooltip({
 			show: {
 				effect: "slideDown",
 				delay: 250
@@ -23,37 +30,29 @@
 		});
 	});
 	</script>
-	<style>
-		label { display: inline-block; width: 5em; }
-	</style>
 </head>
 <body>
 
 <div class="demo">
 
-	<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
-	the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
-	</p>
-	<p>But as it's not a native tooltip, it can be styled. Any themes built with
-	<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
-	will also style tooltip's accordingly.</p>
-	<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
-	<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
-	<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
+<p>But as it's not a native tooltip, it can be styled. Any themes built with
+<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
+will also style tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
 
 </div><!-- End demo -->
 
 
 
 <div class="demo-description">
-
 <p>This demo shows how to customize animations. The tooltip is shown, after a
 delay of 250ms, using a slide down animation, and hidden, after another delay,
 without an animation.</p>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html
index 9d5502f2b..cfb61f2eb 100644
--- a/demos/tooltip/default.html
+++ b/demos/tooltip/default.html
@@ -1,48 +1,47 @@
 <!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.5.1.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">
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.1.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
 	$(function() {
-		$(".demo").tooltip();
+		$( ".demo" ).tooltip();
 	});
 	</script>
 	<style>
-		label { display: inline-block; width: 5em; }
+	label {
+		display: inline-block;
+		width: 5em;
+	}
 	</style>
 </head>
 <body>
 
 <div class="demo">
 
-	<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
-	the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
-	</p>
-	<p>But as it's not a native tooltip, it can be styled. Any themes built with
-	<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
-	will also style tooltip's accordingly.</p>
-	<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
-	<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
-	<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
+<p>But as it's not a native tooltip, it can be styled. Any themes built with
+<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
+will also style tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
 
 </div><!-- End demo -->
 
 
 
 <div class="demo-description">
-
 <p>Hover the links above or use the tab key to cycle the focus on each element.</p>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html
index 983b56bdf..0f91736b2 100644
--- a/demos/tooltip/forms.html
+++ b/demos/tooltip/forms.html
@@ -1,71 +1,87 @@
 <!doctype html>
 <html lang="en">
 <head>
+	<meta charset="utf-8">
 	<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.5.1.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>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.1.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	label {
+		display: inline-block; width: 5em;
+	}
+	fieldset div {
+		margin-bottom: 2em;
+	}
+	fieldset .help {
+		display: inline-block;
+	}
+	.ui-tooltip {
+		width: 210px;
+	}
+	</style>
+	<script>
 	$(function() {
-		$("[title]").tooltip().unbind(".tooltip");
-		$("<button/>").text("Show help").button().toggle(function() {
-			$(":ui-tooltip").tooltip("open");
-		}, function() {
-			$(":ui-tooltip").tooltip("close");
-		}).appendTo("form");
+		var tooltips = $( "[title]" )
+			.click(function() {
+				$( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" );
+			})
+			.bind( "mouseover focusin mouseleave blur click", function( event ) {
+				event.stopImmediatePropagation();
+			})
+			.tooltip();
+		$( "<button>" )
+			.text( "Show help" )
+			.button()
+			.toggle(
+				function() {
+					tooltips.tooltip( "open" );
+				},
+				function() {
+					tooltips.tooltip( "close" );
+				}
+			)
+			.appendTo( "form" );
 	});
 	</script>
-	<style>
-		label { display: inline-block; width: 5em; }
-		.ui-icon { display: inline-block; }
-		fieldset div {
-			margin-bottom: 2em;
-		}
-		.ui-tooltip { width: 210px; }
-	</style>
 </head>
 <body>
 
 <div class="demo">
 
-	<form>
-		<fieldset>
-			<div>
-				<label for="firstname">Firstname</label>
-				<input id="firstname" name="firstname" />
-				<span title="Please provide your firstname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
-			</div>
-			<div>
-				<label for="lastname">Lastname</label>
-				<input id="lastname" name="lastname" />
-				<span title="Please provide also your lastname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
-			</div>
-			<div>
-				<label for="address">Address</label>
-				<input id="address" name="address" />
-				<span title="Your home or work address." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
-			</div>
-		</fieldset>
-	</form>
+<form>
+	<fieldset>
+		<div>
+			<label for="firstname">Firstname</label>
+			<input id="firstname" name="firstname">
+			<span title="Please provide your firstname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+		</div>
+		<div>
+			<label for="lastname">Lastname</label>
+			<input id="lastname" name="lastname">
+			<span title="Please provide also your lastname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+		</div>
+		<div>
+			<label for="address">Address</label>
+			<input id="address" name="address">
+			<span title="Your home or work address." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+		</div>
+	</fieldset>
+</form>
 
 </div><!-- End demo -->
 
 
 
 <div class="demo-description">
-
 <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>
-
 <p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html
index 4ad189ed2..460c494e3 100644
--- a/demos/tooltip/index.html
+++ b/demos/tooltip/index.html
@@ -1,8 +1,9 @@
 <!doctype html>
 <html lang="en">
 <head>
+	<meta charset="utf-8">
 	<title>jQuery UI Tooltip Demos</title>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<link rel="stylesheet" href="../demos.css">
 </head>
 <body>
 
diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html
index dd5dc9d92..4cddb4437 100644
--- a/demos/tooltip/tracking.html
+++ b/demos/tooltip/tracking.html
@@ -1,64 +1,64 @@
 <!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.5.1.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">
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Track the mouse</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.1.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	label {
+		display: inline-block;
+		width: 5em;
+	}
+	</style>
+	<script>
 	$(function() {
-		$(".demo").tooltip({
-			open: function() {
+		$( ".demo" ).tooltip({
+			open: function( event ) {
 				var tooltip = $( ".ui-tooltip" );
-				$(document).mousemove(function( event ) {
-					tooltip.position( {
+				function position( event ) {
+					tooltip.position({
 						my: "left+25 center",
 						at: "right+25 center",
 						of: event
 					});
-				})
+				}
+				$( document ).bind( "mousemove.tooltip-position", position );
 				// trigger once to override element-relative positioning
-				.mousemove();
+				position( event );
 			},
 			close: function() {
-				$(document).unbind( "mousemove" );
+				$( document ).unbind( "mousemove.tooltip-position" );
 			}
 		});
 	});
 	</script>
-	<style>
-		label { display: inline-block; width: 5em; }
-	</style>
 </head>
 <body>
 
 <div class="demo">
 
-	<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
-	the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
-	</p>
-	<p>But as it's not a native tooltip, it can be styled. Any themes built with
-	<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a>
-	will also style tooltip's accordingly.</p>
-	<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p>
-	<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
-	<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
+<p>But as it's not a native tooltip, it can be styled. Any themes built with
+<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
+will also style tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
 
 </div><!-- End demo -->
 
 
 
 <div class="demo-description">
-
 <p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html
index 56003ab5a..e0db0575d 100644
--- a/demos/tooltip/video-player.html
+++ b/demos/tooltip/video-player.html
@@ -1,64 +1,102 @@
 <!doctype html>
 <html lang="en">
 <head>
+	<meta charset="utf-8">
 	<title>jQuery UI Tooltip - Video Player demo</title>
-	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.5.1.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>
-	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.ui.popup.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
-	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<script type="text/javascript">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.1.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.popup.js"></script>
+	<script src="../../ui/jquery.effects.core.js"></script>
+	<script src="../../ui/jquery.effects.blind.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.player {
+		width: 500px;
+		height: 300px;
+		border: 2px groove gray;
+		background: rgb(200, 200, 200);
+		text-align: center;
+		line-height: 300px;
+	}
+	/* TODO load from jquery.ui.popup.css */
+	.ui-popup {
+		position: absolute;
+		z-index: 5000;
+	}
+	.ui-tooltip {
+		border: 1px solid white;
+		background: rgba(20, 20, 20, 1);
+		color: white;
+	}
+	.set {
+		display: inline-block;
+	}
+	.notification {
+		position: absolute;
+		display: inline-block;
+		font-size: 2em;
+		padding: .5em;
+		box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
+	}
+	</style>
+	<script>
 	$(function() {
 		function notify( input ) {
-			var msg = "Selected " + $.trim($(input).text());
-			$("<div/>").appendTo(document.body).text(msg).addClass("notification ui-state-default ui-corner-bottom").position({
-				my: "center top",
-				at: "center top",
-				of: window
-			}).show({
-				effect: "blind"
-			}).delay(1000).hide({
-				effect: "blind",
-				duration: "slow"
-			}, function() {
-				$(this).remove();
-			});
+			var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() );
+			$( "<div>" )
+				.appendTo( document.body )
+				.text( msg )
+				.addClass( "notification ui-state-default ui-corner-bottom" )
+				.position({
+					my: "center top",
+					at: "center top",
+					of: window
+				})
+				.show({
+					effect: "blind"
+				})
+				.delay( 1000 )
+				.hide({
+					effect: "blind",
+					duration: "slow"
+				}, function() {
+					$( this ).remove();
+				});
 		}
-		$("ul").menu({
-			select: function(event, ui) {
-				// TODO stop button from handling the click
-				$(this).popup("close");
-				// TODO should probably be handled by poup, see ESCAPE key handler
+		$( "ul" ).menu({
+			select: function( event, ui ) {
+				// TODO should probably be handled by popup, see ESCAPE key handler
 				// affects key handling
-				$(this).prev().focus();
-				notify(ui.item);
+				$( this ).prev().focus();
+				notify( ui.item );
 			}
 		}).popup();
 
-		$("button").each(function() {
-			$(this).button({
+		$( "button" ).each(function() {
+			var button = $( this ).button({
 				icons: {
-					primary: $(this).data("icon")
+					primary: $( this ).data( "icon" )
 				},
-				text: !!$(this).attr("title")
-			}).click(function() {
-				// TODO don't notify if the button is opening a popup
-				notify(this);
+				text: !!$( this ).attr( "title" )
 			});
+			if ( !button.next().is( ":ui-popup" ) ) {
+				button.click(function() {
+					console.log( "click" );
+					notify( button );
+				});
+			}
 		});
-		$(".set").buttonset({
+		$( ".set" ).buttonset({
 			items: "button"
 		});
 
-
-		$(".demo").tooltip({
+		$( ".demo" ).tooltip({
 			position: {
 				my: "center top",
 				at: "center bottom+5",
@@ -72,63 +110,43 @@
 		});
 	});
 	</script>
-	<style>
-		.player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; }
-		/* TODO load from jquery.ui.popup.css */
-		.ui-popup { position: absolute; z-index: 5000; }
-
-		.ui-tooltip {
-			border: 1px solid white;
-			background: rgba(20, 20, 20, 1);
-			color: white;
-		}
-
-		.set { display: inline-block; }
-
-		.notification { position: absolute; display: inline-block; font-size: 2em; padding: .5em; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); }
-	</style>
 </head>
 <body>
 
 <div class="demo">
 
-	<div class="player">Here Be Video (HTML5?)</div>
-	<div class="tools">
-		<span class="set">
-			<button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button>
-			<button data-icon="ui-icon-circle-arrow-s">I dislike this</button>
-		</span>
-		<div class="set">
-			<button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button>
-			<button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
-			<ul>
-				<li>
-					<a href="#">Favorites</a>
-				</li>
-				<li>
-					<a href="#">Watch Later</a>
-				</li>
-				<li>
-					<a href="#">New Playlist...</a>
-				</li>
-			</ul>
-		</div>
-		<button title="Share this video">Share</button>
-		<button data-icon="ui-icon-alert">Flag as inappropiate</button>
+<div class="player">Here Be Video (HTML5?)</div>
+<div class="tools">
+	<span class="set">
+		<button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button>
+		<button data-icon="ui-icon-circle-arrow-s">I dislike this</button>
+	</span>
+	<div class="set">
+		<button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button>
+		<button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
+		<ul>
+			<li>
+				<a href="#">Favorites</a>
+			</li>
+			<li>
+				<a href="#">Watch Later</a>
+			</li>
+			<li>
+				<a href="#">New Playlist...</a>
+			</li>
+		</ul>
 	</div>
- </div>
+	<button title="Share this video">Share</button>
+	<button data-icon="ui-icon-alert">Flag as inappropiate</button>
+</div>
 
 </div><!-- End demo -->
 
 
 
 <div class="demo-description">
-
 <p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>
-
 </div><!-- End demo-description -->
 
-
-
 </body>
 </html>
author	Scott González <scott.gonzalez@gmail.com>	2011-05-27 20:52:13 -0400
committer	Scott González <scott.gonzalez@gmail.com>	2011-05-27 20:52:13 -0400
commit	c34a814a4b140a0b6a7610874d7918eb3a1e01a3 (patch)
tree	8f08044088727227bacfcf4638d5e3d054bc96dc /demos/tooltip
parent	e7be72ff06d4152245a674c37abc7e8577bfc7a1 (diff)
download	jquery-ui-c34a814a4b140a0b6a7610874d7918eb3a1e01a3.tar.gz jquery-ui-c34a814a4b140a0b6a7610874d7918eb3a1e01a3.zip