Tooltip demo: Add a menu to the playlist button

diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html
index aee2cee2d6521703c996620ff95ba0a4abbb2025..ce349d11ed72038b760736c966977520e59d2c8b 100644 (file)
--- 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>