11-Apr-2023
.
Admin
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...
#Jqury UI
