Skip to content
Permalink
Browse files

Tooltip demo: Add a menu to the playlist button

  • Loading branch information
jzaefferer committed Apr 24, 2014
1 parent eefeaf0 commit 67f564014a7e209fde1911b392ec60ce0109d7a9
Showing with 31 additions and 1 deletion.
  1. +31 −1 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>

0 comments on commit 67f5640

Please sign in to comment.
You can’t perform that action at this time.