From: Jörn Zaefferer <joern.zaefferer@gmail.com>
Date: Thu, 24 Apr 2014 12:02:09 +0000 (+0200)
Subject: Tooltip demo: Add a menu to the playlist button
X-Git-Tag: 1.11.0-beta.1~12
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=67f564014a7e209fde1911b392ec60ce0109d7a9;p=jquery-ui.git

Tooltip demo: Add a menu to the playlist button
---

diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html
index aee2cee2d..ce349d11e 100644
--- a/demos/tooltip/video-player.html
+++ b/demos/tooltip/video-player.html
@@ -28,6 +28,9 @@
 		background: rgba(20, 20, 20, 1);
 		color: white;
 	}
+	.ui-menu {
+		position: absolute;
+	}
 	.set {
 		display: inline-block;
 	}
@@ -71,7 +74,7 @@
 				},
 				text: !!$( this ).attr( "title" )
 			});
-			button.click(function() {
+			button.not( ".menu" ).click(function() {
 				notify( button );
 			});
 		});
@@ -79,6 +82,27 @@
 			items: "button"
 		});
 
+		$( "button.menu" )
+			.click(function() {
+				$( document ).tooltip( "close", { currentTarget: this });
+				var menu = $( this ).next().show().position({
+					my: "left top",
+					at: "left bottom",
+					of: this
+				});
+				$( document ).one( "click", function() {
+					menu.hide();
+				});
+				return false;
+			})
+			.next()
+				.hide()
+				.menu({
+					selected: function( event, ui ) {
+						notify( ui.item );
+					}
+				});
+
 		$( document ).tooltip({
 			position: {
 				my: "center top",
@@ -105,6 +129,12 @@
 	<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>Favorites</li>
+			<li>Funnees</li>
+			<li></li>
+			<li>New playlist...</li>
+		</ul>
 	</div>
 	<button title="Share this video">Share</button>
 	<button data-icon="ui-icon-alert">Flag as inappropriate</button>