Tooltip demo: Add a menu to the playlist button

Author: jzaefferer

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,14 +74,35 @@
 				},
 				text: !!$( this ).attr( "title" )
 			});
-			button.click(function() {
+			button.not( ".menu" ).click(function() {
 				notify( button );
 			});
 		});
 		$( ".set" ).buttonset({
 			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>