1 files changed, 91 insertions, 0 deletions
diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html
new file mode 100644
index 000000000..0c251ea83
--- /dev/null
+++ b/demos/tooltip/video-player.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<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="../../tests/visual/menu/popup.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<script type="text/javascript">
+	$(function() {
+		$("button").each(function() {
+			$(this).button({
+				icons: {
+					primary: $(this).data("icon")
+				},
+				text: !!$(this).attr("title")
+			});
+		});
+		$(".set").buttonset();
+
+		// TODO hide the tooltip when clicking the button
+		$("ul").menu().popup({
+			trigger: $(".menu")
+		});
+
+		$(".demo").tooltip({
+			position: {
+				my: "center top",
+				at: "center bottom+5px"
+			},
+			// TODO need to merge tooltip-animations for this to work
+			hide: false
+		});
+	});
+	</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; }
+	</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>
+		<span 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>
+		</span>
+		<button title="Share this video">Share</button>
+		<button data-icon="ui-icon-alert">Flag as inappropiate</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>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>A fake video player with like/share/stats button, each with a tooltip.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>