library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tooltip demos: Cleanup.

Browse Source
This commit is contained in:
Scott González 2011-05-27 20:52:13 -04:00
parent e7be72ff06
commit c34a814a4b
6 changed files with 248 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
demos/tooltip/custom-animation.html
View File

@ -1,17 +1,24 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Custom animation demo</title> <title>jQuery UI Tooltip - Custom animation demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.5.1.js"></script> <script src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> <script src="../../ui/jquery.ui.tooltip.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <style>
label {
display: inline-block;
width: 5em;
}
</style>
<script>
$(function() { $(function() {
$(".demo").tooltip({ $( ".demo" ).tooltip({
show: { show: {
effect: "slideDown", effect: "slideDown",
delay: 250 delay: 250
@ -23,37 +30,29 @@
}); });
}); });
</script> </script>
<style>
label { display: inline-block; width: 5em; }
</style>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip. the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
</p> <p>But as it's not a native tooltip, it can be styled. Any themes built with
<p>But as it's not a native tooltip, it can be styled. Any themes built with <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
will also style tooltip's accordingly.</p> <p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p> <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p> <p>Hover the field to see the tooltip.</p>
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p>This demo shows how to customize animations. The tooltip is shown, after a <p>This demo shows how to customize animations. The tooltip is shown, after a
delay of 250ms, using a slide down animation, and hidden, after another delay, delay of 250ms, using a slide down animation, and hidden, after another delay,
without an animation.</p> without an animation.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

47
demos/tooltip/default.html
View File

@ -1,48 +1,47 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Tooltip - Default demo</title> <meta charset="utf-8">
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <title>jQuery UI Tooltip - Default functionality</title>
<script type="text/javascript" src="../../jquery-1.5.1.js"></script> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <script src="../../ui/jquery.ui.tooltip.js"></script>
<script type="text/javascript"> <link rel="stylesheet" href="../demos.css">
<script>
$(function() { $(function() {
$(".demo").tooltip(); $( ".demo" ).tooltip();
}); });
</script> </script>
<style> <style>
label { display: inline-block; width: 5em; } label {
display: inline-block;
width: 5em;
}
</style> </style>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip. the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
</p> <p>But as it's not a native tooltip, it can be styled. Any themes built with
<p>But as it's not a native tooltip, it can be styled. Any themes built with <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
will also style tooltip's accordingly.</p> <p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p> <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p> <p>Hover the field to see the tooltip.</p>
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p>Hover the links above or use the tab key to cycle the focus on each element.</p> <p>Hover the links above or use the tab key to cycle the focus on each element.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

110
demos/tooltip/forms.html
View File

@ -1,71 +1,87 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default demo</title> <title>jQuery UI Tooltip - Default demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.5.1.js"></script> <script src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> <script src="../../ui/jquery.ui.tooltip.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <style>
label {
display: inline-block; width: 5em;
}
fieldset div {
margin-bottom: 2em;
}
fieldset .help {
display: inline-block;
}
.ui-tooltip {
width: 210px;
}
</style>
<script>
$(function() { $(function() {
$("[title]").tooltip().unbind(".tooltip"); var tooltips = $( "[title]" )
$("<button/>").text("Show help").button().toggle(function() { .click(function() {
$(":ui-tooltip").tooltip("open"); $( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" );
}, function() { })
$(":ui-tooltip").tooltip("close"); .bind( "mouseover focusin mouseleave blur click", function( event ) {
}).appendTo("form"); event.stopImmediatePropagation();
})
.tooltip();
$( "<button>" )
.text( "Show help" )
.button()
.toggle(
function() {
tooltips.tooltip( "open" );
},
function() {
tooltips.tooltip( "close" );
}
)
.appendTo( "form" );
}); });
</script> </script>
<style>
label { display: inline-block; width: 5em; }
.ui-icon { display: inline-block; }
fieldset div {
margin-bottom: 2em;
}
.ui-tooltip { width: 210px; }
</style>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<form> <form>
<fieldset> <fieldset>
<div> <div>
<label for="firstname">Firstname</label> <label for="firstname">Firstname</label>
<input id="firstname" name="firstname" /> <input id="firstname" name="firstname">
<span title="Please provide your firstname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> <span title="Please provide your firstname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
</div> </div>
<div> <div>
<label for="lastname">Lastname</label> <label for="lastname">Lastname</label>
<input id="lastname" name="lastname" /> <input id="lastname" name="lastname">
<span title="Please provide also your lastname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> <span title="Please provide also your lastname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
</div> </div>
<div> <div>
<label for="address">Address</label> <label for="address">Address</label>
<input id="address" name="address" /> <input id="address" name="address">
<span title="Your home or work address." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> <span title="Your home or work address." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
</div> </div>
</fieldset> </fieldset>
</form> </form>
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p>Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.</p> <p>Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.</p>
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p> <p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

3
demos/tooltip/index.html
View File

@ -1,8 +1,9 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8">
<title>jQuery UI Tooltip Demos</title> <title>jQuery UI Tooltip Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
</head> </head>
<body> <body>

64
demos/tooltip/tracking.html
View File

@ -1,64 +1,64 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Tooltip - Default demo</title> <meta charset="utf-8">
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <title>jQuery UI Tooltip - Track the mouse</title>
<script type="text/javascript" src="../../jquery-1.5.1.js"></script> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <script src="../../ui/jquery.ui.tooltip.js"></script>
<script type="text/javascript"> <link rel="stylesheet" href="../demos.css">
<style>
label {
display: inline-block;
width: 5em;
}
</style>
<script>
$(function() { $(function() {
$(".demo").tooltip({ $( ".demo" ).tooltip({
open: function() { open: function( event ) {
var tooltip = $( ".ui-tooltip" ); var tooltip = $( ".ui-tooltip" );
$(document).mousemove(function( event ) { function position( event ) {
tooltip.position( { tooltip.position({
my: "left+25 center", my: "left+25 center",
at: "right+25 center", at: "right+25 center",
of: event of: event
}); });
}) }
$( document ).bind( "mousemove.tooltip-position", position );
// trigger once to override element-relative positioning // trigger once to override element-relative positioning
.mousemove(); position( event );
}, },
close: function() { close: function() {
$(document).unbind( "mousemove" ); $( document ).unbind( "mousemove.tooltip-position" );
} }
}); });
}); });
</script> </script>
<style>
label { display: inline-block; width: 5em; }
</style>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip. the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
</p> <p>But as it's not a native tooltip, it can be styled. Any themes built with
<p>But as it's not a native tooltip, it can be styled. Any themes built with <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
<a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
will also style tooltip's accordingly.</p> <p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p> <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p> <p>Hover the field to see the tooltip.</p>
<p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p> <p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

190
demos/tooltip/video-player.html
View File

@ -1,64 +1,102 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Video Player demo</title> <title>jQuery UI Tooltip - Video Player demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.5.1.js"></script> <script src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> <script src="../../ui/jquery.ui.tooltip.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> <script src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.popup.js"></script> <script src="../../ui/jquery.ui.popup.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> <script src="../../ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> <script src="../../ui/jquery.effects.blind.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <style>
.player {
width: 500px;
height: 300px;
border: 2px groove gray;
background: rgb(200, 200, 200);
text-align: center;
line-height: 300px;
}
/* TODO load from jquery.ui.popup.css */
.ui-popup {
position: absolute;
z-index: 5000;
}
.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);
}
</style>
<script>
$(function() { $(function() {
function notify( input ) { function notify( input ) {
var msg = "Selected " + $.trim($(input).text()); 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({ $( "<div>" )
my: "center top", .appendTo( document.body )
at: "center top", .text( msg )
of: window .addClass( "notification ui-state-default ui-corner-bottom" )
}).show({ .position({
effect: "blind" my: "center top",
}).delay(1000).hide({ at: "center top",
effect: "blind", of: window
duration: "slow" })
}, function() { .show({
$(this).remove(); effect: "blind"
}); })
.delay( 1000 )
.hide({
effect: "blind",
duration: "slow"
}, function() {
$( this ).remove();
});
} }
$("ul").menu({ $( "ul" ).menu({
select: function(event, ui) { select: function( event, ui ) {
// TODO stop button from handling the click // TODO should probably be handled by popup, see ESCAPE key handler
$(this).popup("close");
// TODO should probably be handled by poup, see ESCAPE key handler
// affects key handling // affects key handling
$(this).prev().focus(); $( this ).prev().focus();
notify(ui.item); notify( ui.item );
} }
}).popup(); }).popup();
$("button").each(function() { $( "button" ).each(function() {
$(this).button({ var button = $( this ).button({
icons: { icons: {
primary: $(this).data("icon") primary: $( this ).data( "icon" )
}, },
text: !!$(this).attr("title") text: !!$( this ).attr( "title" )
}).click(function() {
// TODO don't notify if the button is opening a popup
notify(this);
}); });
if ( !button.next().is( ":ui-popup" ) ) {
button.click(function() {
console.log( "click" );
notify( button );
});
}
}); });
$(".set").buttonset({ $( ".set" ).buttonset({
items: "button" items: "button"
}); });
$( ".demo" ).tooltip({
$(".demo").tooltip({
position: { position: {
my: "center top", my: "center top",
at: "center bottom+5", at: "center bottom+5",
@ -72,63 +110,43 @@
}); });
}); });
</script> </script>
<style>
.player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; }
/* TODO load from jquery.ui.popup.css */
.ui-popup { position: absolute; z-index: 5000; }
.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); }
</style>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<div class="player">Here Be Video (HTML5?)</div> <div class="player">Here Be Video (HTML5?)</div>
<div class="tools"> <div class="tools">
<span class="set"> <span class="set">
<button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button> <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> <button data-icon="ui-icon-circle-arrow-s">I dislike this</button>
</span> </span>
<div class="set"> <div class="set">
<button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button> <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 class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
<ul> <ul>
<li> <li>
<a href="#">Favorites</a> <a href="#">Favorites</a>
</li> </li>
<li> <li>
<a href="#">Watch Later</a> <a href="#">Watch Later</a>
</li> </li>
<li> <li>
<a href="#">New Playlist...</a> <a href="#">New Playlist...</a>
</li> </li>
</ul> </ul>
</div>
<button title="Share this video">Share</button>
<button data-icon="ui-icon-alert">Flag as inappropiate</button>
</div> </div>
</div> <button title="Share this video">Share</button>
<button data-icon="ui-icon-alert">Flag as inappropiate</button>
</div>
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p> <p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>
</html> </html>