In this tutorial, we will learn JQuery UI Tooltip Video Player Demo Example


Example :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JQuery UI Tooltip Video Player demo Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        .content{
            text-align: center;
        }
        .player {
            margin:30px auto;
            width: 500px;
            height: 300px;
            border: 2px groove gray;
            background: #ccc;
            text-align: center;
            line-height: 300px;
        }
        .ui-tooltip {
            border: 1px solid white;
            background: #111;
            color: white;
        }
        .ui-menu {
            position: absolute;
        }
        .set {
            display: inline-block;
        }
        .notification {
            position: absolute;
            display: inline-block;
            font-size: 2em;
            padding: .5em;
            box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
        }
        h2{
        	text-align: center;
        }
        body{
        	background-color: #f2c18c;
        }
    </style>
</head>
<body>
<h2>JQuery UI Tooltip Video Player demo Example - rathorji.in</h2>
<div class="content">
    <div class="player">Here Be Video (HTML5?)</div>
        <div class="tools">
        <span class="set">
            <button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button>
            <button data-icon="ui-icon-circle-arrow-s">I dislike this</button>
        </span>
        <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><div>Favorites</div></li>
                <li><div>Funnees</div></li>
                <li></li>
                <li><div>New playlist...</div></li>
            </ul>
        </div>
        <button title="Share this video">Share</button>
        <button data-icon="ui-icon-alert">Flag as inappropriate</button>
    </div>
</div>
<script type="text/javascript">
    $( function() {
        function notify( input ) {
        var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() );
            $( "<div>" )
                .appendTo( document.body )
                .text( msg )
                .addClass( "notification ui-state-default ui-corner-bottom" )
                .position({
                    my: "center top",
                    at: "center top",
                    of: window
                })
            .show({
                effect: "blind"
            })
            .delay( 1000 )
            .hide({
                effect: "blind",
                duration: "slow"
            }, function() {
                $( this ).remove();
            });
        }
     
        $( "button" ).each(function() {
            var button = $( this ).button({
                icons: {
                    primary: $( this ).data( "icon" )
                },
                text: !!$( this ).attr( "title" )
            });
            button.not( ".menu" ).on( "click", function() {
                notify( button );
            });
        });
        $(".set").controlgroup({
            items: {
                "button" : "button"
            }
        });
     
        $( "button.menu" )
            .on( "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",
                at: "center bottom+5",
            },
            show: {
                duration: "fast"
            },
            hide: {
                effect: "hide"
            }
        });
    });
</script>
</body>
</html>



May this example help you.