jQuery UI & Tooltips: Video player

This entry is part 6 of 7 in the series jQuery UI Tooltips

jQuery UI Tooltip – Video Player demo

A fake video player with like/share/stats button, each with a custom-styled tooltip.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Video Player demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        .player {
            width: 500px;
            height: 300px;
            border: 2px groove gray;
            background: rgb(200, 200, 200);
            text-align: center;
            line-height: 300px;

        .ui-tooltip {
            border: 1px solid white;
            background: rgba(20, 20, 20, 1);
            color: white;

        .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);
        $(function () {
            function notify(input) {
                var msg = 'Selected ' + $.trim(input.data('tooltip-title') || input.text());
                        .addClass('notification ui-state-default ui-corner-bottom')
                            my: 'center top',
                            at: 'center top',
                            of: window
                            effect: 'blind'
                            effect: 'blind',
                            duration: 'slow'
                        }, function () {

            $('button').each(function () {
                var button = $(this).button({
                    icons: {
                        primary: $(this).data('icon')
                    text: !!$(this).attr('title')
                button.click(function () {
                items: 'button'

                position: {
                    my: 'center top',
                    at: 'center bottom+5',
                show: {
                    duration: 'fast'
                hide: {
                    effect: 'hide'

<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>

    <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>
    <button title='Share this video'>Share</button>
    <button data-icon='ui-icon-alert'>Flag as inappropriate</button>

Try The Code
Series Navigation<< jQuery UI & Tooltips: Form
jQuery UI & Tooltips: Place tooltip near the mouse >>

Leave a comment

Leave a Reply