5 <title>jQuery UI Tooltip - Video Player demo</title>
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7 <script src="../../jquery-1.9.1.js"></script>
8 <script src="../../ui/jquery.ui.core.js"></script>
9 <script src="../../ui/jquery.ui.widget.js"></script>
10 <script src="../../ui/jquery.ui.position.js"></script>
11 <script src="../../ui/jquery.ui.tooltip.js"></script>
12 <script src="../../ui/jquery.ui.button.js"></script>
13 <script src="../../ui/jquery.ui.menu.js"></script>
14 <script src="../../ui/jquery.ui.effect.js"></script>
15 <script src="../../ui/jquery.ui.effect-blind.js"></script>
16 <link rel="stylesheet" href="../demos.css">
21 border: 2px groove gray;
22 background: rgb(200, 200, 200);
27 border: 1px solid white;
28 background: rgba(20, 20, 20, 1);
32 display: inline-block;
36 display: inline-block;
39 box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
44 function notify( input ) {
45 var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() );
47 .appendTo( document.body )
49 .addClass( "notification ui-state-default ui-corner-bottom" )
67 $( "button" ).each(function() {
68 var button = $( this ).button({
70 primary: $( this ).data( "icon" )
72 text: !!$( this ).attr( "title" )
74 button.click(function() {
78 $( ".set" ).buttonset({
82 $( document ).tooltip({
85 at: "center bottom+5",
99 <div class="player">Here Be Video (HTML5?)</div>
102 <button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button>
103 <button data-icon="ui-icon-circle-arrow-s">I dislike this</button>
106 <button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button>
107 <button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
109 <button title="Share this video">Share</button>
110 <button data-icon="ui-icon-alert">Flag as inappropiate</button>
113 <div class="demo-description">
114 <p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>