Skip to content

Commit 67f5640

Browse files
committed
Tooltip demo: Add a menu to the playlist button
1 parent eefeaf0 commit 67f5640

File tree

1 file changed

+31
-1
lines changed

1 file changed

+31
-1
lines changed

demos/tooltip/video-player.html

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@
2828
background: rgba(20, 20, 20, 1);
2929
color: white;
3030
}
31+
.ui-menu {
32+
position: absolute;
33+
}
3134
.set {
3235
display: inline-block;
3336
}
@@ -71,14 +74,35 @@
7174
},
7275
text: !!$( this ).attr( "title" )
7376
});
74-
button.click(function() {
77+
button.not( ".menu" ).click(function() {
7578
notify( button );
7679
});
7780
});
7881
$( ".set" ).buttonset({
7982
items: "button"
8083
});
8184

85+
$( "button.menu" )
86+
.click(function() {
87+
$( document ).tooltip( "close", { currentTarget: this });
88+
var menu = $( this ).next().show().position({
89+
my: "left top",
90+
at: "left bottom",
91+
of: this
92+
});
93+
$( document ).one( "click", function() {
94+
menu.hide();
95+
});
96+
return false;
97+
})
98+
.next()
99+
.hide()
100+
.menu({
101+
selected: function( event, ui ) {
102+
notify( ui.item );
103+
}
104+
});
105+
82106
$( document ).tooltip({
83107
position: {
84108
my: "center top",
@@ -105,6 +129,12 @@
105129
<div class="set">
106130
<button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button>
107131
<button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
132+
<ul>
133+
<li>Favorites</li>
134+
<li>Funnees</li>
135+
<li></li>
136+
<li>New playlist...</li>
137+
</ul>
108138
</div>
109139
<button title="Share this video">Share</button>
110140
<button data-icon="ui-icon-alert">Flag as inappropriate</button>

0 commit comments

Comments
 (0)