diff options
author | jzaefferer <joern.zaefferer@gmail.com> | 2010-04-01 09:42:22 +0200 |
---|---|---|
committer | jzaefferer <joern.zaefferer@gmail.com> | 2010-04-01 09:42:22 +0200 |
commit | 1a89b6ee2f9f02fd92d9ec3ee663b7dd237d3d15 (patch) | |
tree | cb21f9035ce5c1ed52b0c652f642a3beca573528 | |
parent | 2958b0c2b4164ff77bfe0315e6262591b43e118d (diff) | |
parent | 9ec4c4e682946b4480b5366aabf3bcf353ef49f9 (diff) | |
download | jquery-ui-1a89b6ee2f9f02fd92d9ec3ee663b7dd237d3d15.tar.gz jquery-ui-1a89b6ee2f9f02fd92d9ec3ee663b7dd237d3d15.zip |
merge
-rw-r--r-- | demos/tooltip/forms.html | 69 | ||||
-rw-r--r-- | demos/tooltip/tracking.html | 65 | ||||
-rw-r--r-- | tests/visual/compound/widgets_in_dialog.html | 9 | ||||
-rw-r--r-- | themes/base/jquery.ui.tooltip.css | 1 | ||||
-rw-r--r-- | ui/jquery.ui.tooltip.js | 14 |
5 files changed, 149 insertions, 9 deletions
diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html new file mode 100644 index 000000000..626161d6e --- /dev/null +++ b/demos/tooltip/forms.html @@ -0,0 +1,69 @@ +<!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.4.2.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"> + $(function() { + $("[title]").tooltip(); + $("<button/>").text("Show help").button().toggle(function() { + $(":ui-tooltip").tooltip("open"); + }, function() { + $(":ui-tooltip").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: 200px; } + </style> +</head> +<body> + +<div class="demo"> + + <form> + <fieldset> + <div> + <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> + <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> + <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> + +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>Hover the questionmark-buttons or use the button below to display the help texts all at once. Click again to hide them.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html new file mode 100644 index 000000000..9af4d0d09 --- /dev/null +++ b/demos/tooltip/tracking.html @@ -0,0 +1,65 @@ +<!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.4.2.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"> + $(function() { + $("a, input").tooltip({ + open: function() { + var tooltip = $(this).tooltip("widget"); + $(document).mousemove(function(event) { + tooltip.position({ + my: "left center", + at: "right center", + offset: "25 25", + of: event + }); + }) + // trigger once to override element-relative positioning + .mousemove(); + }, + close: function() { + $(document).unbind("mousemove"); + } + }); + }); + </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> + +</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> diff --git a/tests/visual/compound/widgets_in_dialog.html b/tests/visual/compound/widgets_in_dialog.html index 7551efd8d..e2eb366b4 100644 --- a/tests/visual/compound/widgets_in_dialog.html +++ b/tests/visual/compound/widgets_in_dialog.html @@ -20,8 +20,11 @@ <script type="text/javascript" src="../../../ui/jquery.ui.progressbar.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.slider.js"></script> <script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> <script type="text/javascript"> $(function() { + $("[title]").tooltip(); + $("#accordion").accordion(); $("#autocomplete").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"] @@ -50,7 +53,7 @@ width: 100, height: 75, modal: true - }) + }); }); </script> </head> @@ -76,11 +79,11 @@ <input id="datepicker"> <button>Another button</button> <div> - <label for="progress">Progress: <input id="progress" /></label> + <label for="progress">Progress: <input title="The progress we made so far" id="progress" /></label> </div> <div id="progressbar"> </div> - <div id="slider"></div> + <div id="slider" title="Sliding progress..."></div> <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> diff --git a/themes/base/jquery.ui.tooltip.css b/themes/base/jquery.ui.tooltip.css index 2b01036b0..6d8e988bd 100644 --- a/themes/base/jquery.ui.tooltip.css +++ b/themes/base/jquery.ui.tooltip.css @@ -7,6 +7,7 @@ -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; } +/* Fades and background-images don't work well together in IE6, drop the image */ * html .ui-tooltip { background-image: none; } diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 1fe452450..166bff407 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -49,7 +49,7 @@ $.widget("ui.tooltip", { this.opacity = this.tooltip.css("opacity"); this.element .bind("focus.tooltip mouseenter.tooltip", function(event) { - self.show($(event.target)); + self.open(); }) .bind("blur.tooltip mouseleave.tooltip", function(event) { self.close(); @@ -73,7 +73,8 @@ $.widget("ui.tooltip", { return this.tooltip; }, - show: function(target) { + open: function() { + var target = this.element; // already visible? possible when both focus and mouseover events occur if (this.current && this.current[0] == target[0]) return; @@ -83,14 +84,14 @@ $.widget("ui.tooltip", { var content = this.options.content.call(target[0], function(response) { // ignore async responses that come in after the tooltip is already hidden if (self.current == target) - self.open(target, response); + self._show(target, response); }); if (content) { - self.open(target, content); + self._show(target, content); } }, - open: function(target, content) { + _show: function(target, content) { if (!content) return; @@ -115,7 +116,7 @@ $.widget("ui.tooltip", { else this.tooltip.is(':visible') ? this.tooltip.fadeTo("normal", this.opacity) : this.tooltip.fadeIn(); - this._trigger("show", null, { target: target }); + this._trigger( "open" ); }, close: function() { @@ -136,6 +137,7 @@ $.widget("ui.tooltip", { else this.tooltip.stop().fadeOut(); + this._trigger( "close" ); } }); |