<!doctype html>
<html lang="en">
<head>
+ <meta charset="utf-8">
<title>jQuery UI Tooltip - Custom animation demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.5.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.tooltip.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ label {
+ display: inline-block;
+ width: 5em;
+ }
+ </style>
+ <script>
$(function() {
- $(".demo").tooltip({
+ $( ".demo" ).tooltip({
show: {
effect: "slideDown",
delay: 250
});
});
</script>
- <style>
- label { display: inline-block; width: 5em; }
- </style>
</head>
<body>
<div class="demo">
- <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.
- </p>
- <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>
- will also style tooltip's accordingly.</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>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+<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.</p>
+<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>
+will also style tooltips accordingly.</p>
+<p>Tooltips 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>Hover the field to see the tooltip.</p>
</div><!-- End demo -->
<div class="demo-description">
-
<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,
without an animation.</p>
-
</div><!-- End demo-description -->
-
-
</body>
</html>
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Tooltip - Default demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Tooltip - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.5.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.tooltip.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
- $(".demo").tooltip();
+ $( ".demo" ).tooltip();
});
</script>
<style>
- label { display: inline-block; width: 5em; }
+ label {
+ display: inline-block;
+ width: 5em;
+ }
</style>
</head>
<body>
<div class="demo">
- <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.
- </p>
- <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>
- will also style tooltip's accordingly.</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>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+<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.</p>
+<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>
+will also style tooltips accordingly.</p>
+<p>Tooltips 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>Hover the field to see the tooltip.</p>
</div><!-- End demo -->
<div class="demo-description">
-
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
-
</div><!-- End demo-description -->
-
-
</body>
</html>
<!doctype html>
<html lang="en">
<head>
+ <meta charset="utf-8">
<title>jQuery UI Tooltip - Default demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.5.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.tooltip.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ label {
+ display: inline-block; width: 5em;
+ }
+ fieldset div {
+ margin-bottom: 2em;
+ }
+ fieldset .help {
+ display: inline-block;
+ }
+ .ui-tooltip {
+ width: 210px;
+ }
+ </style>
+ <script>
$(function() {
- $("[title]").tooltip().unbind(".tooltip");
- $("<button/>").text("Show help").button().toggle(function() {
- $(":ui-tooltip").tooltip("open");
- }, function() {
- $(":ui-tooltip").tooltip("close");
- }).appendTo("form");
+ var tooltips = $( "[title]" )
+ .click(function() {
+ $( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" );
+ })
+ .bind( "mouseover focusin mouseleave blur click", function( event ) {
+ event.stopImmediatePropagation();
+ })
+ .tooltip();
+ $( "<button>" )
+ .text( "Show help" )
+ .button()
+ .toggle(
+ function() {
+ tooltips.tooltip( "open" );
+ },
+ function() {
+ tooltips.tooltip( "close" );
+ }
+ )
+ .appendTo( "form" );
});
</script>
- <style>
- label { display: inline-block; width: 5em; }
- .ui-icon { display: inline-block; }
- fieldset div {
- margin-bottom: 2em;
- }
- .ui-tooltip { width: 210px; }
- </style>
</head>
<body>
<div class="demo">
- <form>
- <fieldset>
- <label for="firstname">Firstname</label>
- <input id="firstname" name="firstname" />
- <span title="Please provide your firstname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
- </div>
- <label for="lastname">Lastname</label>
- <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>
- </div>
- <label for="address">Address</label>
- <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>
- </div>
- </fieldset>
- </form>
+<form>
+ <fieldset>
+ <div>
+ <label for="firstname">Firstname</label>
+ <input id="firstname" name="firstname">
+ <span title="Please provide your firstname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ </div>
+ <div>
+ <label for="lastname">Lastname</label>
+ <input id="lastname" name="lastname">
+ <span title="Please provide also your lastname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ </div>
+ <div>
+ <label for="address">Address</label>
+ <input id="address" name="address">
+ <span title="Your home or work address." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ </div>
+ </fieldset>
+</form>
</div><!-- End demo -->
<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>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
-
</div><!-- End demo-description -->
-
-
</body>
</html>
<!doctype html>
<html lang="en">
<head>
+ <meta charset="utf-8">
<title>jQuery UI Tooltip Demos</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link rel="stylesheet" href="../demos.css">
</head>
<body>
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Tooltip - Default demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Tooltip - Track the mouse</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.5.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.tooltip.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ label {
+ display: inline-block;
+ width: 5em;
+ }
+ </style>
+ <script>
$(function() {
- $(".demo").tooltip({
- open: function() {
+ $( ".demo" ).tooltip({
+ open: function( event ) {
var tooltip = $( ".ui-tooltip" );
- $(document).mousemove(function( event ) {
- tooltip.position( {
+ function position( event ) {
+ tooltip.position({
my: "left+25 center",
at: "right+25 center",
of: event
});
- })
+ }
+ $( document ).bind( "mousemove.tooltip-position", position );
// trigger once to override element-relative positioning
- .mousemove();
+ position( event );
},
close: function() {
- $(document).unbind( "mousemove" );
+ $( document ).unbind( "mousemove.tooltip-position" );
}
});
});
</script>
- <style>
- label { display: inline-block; width: 5em; }
- </style>
</head>
<body>
<div class="demo">
- <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.
- </p>
- <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>
- will also style tooltip's accordingly.</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>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p>
+<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.</p>
+<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>
+will also style tooltips accordingly.</p>
+<p>Tooltips 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>Hover the field to see the tooltip.</p>
</div><!-- End demo -->
<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>
-
</div><!-- End demo-description -->
-
-
</body>
</html>
<!doctype html>
<html lang="en">
<head>
+ <meta charset="utf-8">
<title>jQuery UI Tooltip - Video Player demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.5.1.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.popup.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.5.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.tooltip.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.popup.js"></script>
+ <script src="../../ui/jquery.effects.core.js"></script>
+ <script src="../../ui/jquery.effects.blind.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <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 notify( input ) {
- var msg = "Selected " + $.trim($(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();
- });
+ 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();
+ });
}
- $("ul").menu({
- select: function(event, ui) {
- // TODO stop button from handling the click
- $(this).popup("close");
- // TODO should probably be handled by poup, see ESCAPE key handler
+ $( "ul" ).menu({
+ select: function( event, ui ) {
+ // TODO should probably be handled by popup, see ESCAPE key handler
// affects key handling
- $(this).prev().focus();
- notify(ui.item);
+ $( this ).prev().focus();
+ notify( ui.item );
}
}).popup();
- $("button").each(function() {
- $(this).button({
+ $( "button" ).each(function() {
+ var button = $( this ).button({
icons: {
- primary: $(this).data("icon")
+ primary: $( this ).data( "icon" )
},
- text: !!$(this).attr("title")
- }).click(function() {
- // TODO don't notify if the button is opening a popup
- notify(this);
+ text: !!$( this ).attr( "title" )
});
+ if ( !button.next().is( ":ui-popup" ) ) {
+ button.click(function() {
+ console.log( "click" );
+ notify( button );
+ });
+ }
});
- $(".set").buttonset({
+ $( ".set" ).buttonset({
items: "button"
});
-
- $(".demo").tooltip({
+ $( ".demo" ).tooltip({
position: {
my: "center top",
at: "center bottom+5",
});
});
</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>
<body>
<div class="demo">
- <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>
- <a href="#">Favorites</a>
- </li>
- <li>
- <a href="#">Watch Later</a>
- </li>
- <li>
- <a href="#">New Playlist...</a>
- </li>
- </ul>
- </div>
- <button title="Share this video">Share</button>
- <button data-icon="ui-icon-alert">Flag as inappropiate</button>
+<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>
+ <a href="#">Favorites</a>
+ </li>
+ <li>
+ <a href="#">Watch Later</a>
+ </li>
+ <li>
+ <a href="#">New Playlist...</a>
+ </li>
+ </ul>
</div>
- </div>
+ <button title="Share this video">Share</button>
+ <button data-icon="ui-icon-alert">Flag as inappropiate</button>
+</div>
</div><!-- End demo -->
<div class="demo-description">
-
<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>
-
</div><!-- End demo-description -->
-
-
</body>
</html>
projects / jquery-ui.git / commitdiff