JQuery UI Tooltip Video Player Demo Example

jQuery · 11-Apr-2023

When “JQuery UI Tooltip Video Player Demo Example” moves through design, development and browser testing, the platform page can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys,

In this example,I will learn you how to use tooltip video player demo in jquery ui.you can easy and simply use tooltip video player demo in jquery ui.

The tooltip widget in jQuery UI is different from the traditional tooltip primarily by making it more themeable and making it much more customizable.

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 - Nicesnippets.com</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>

It will help you...