diff options
28 files changed, 1164 insertions, 27 deletions
diff --git a/build/build.xml b/build/build.xml index 568cc9c92..4ebe6984c 100644 --- a/build/build.xml +++ b/build/build.xml @@ -271,6 +271,7 @@ <get src="${url}Dialog" dest="${docs.dir}dialog.html" /> <get src="${url}Progressbar" dest="${docs.dir}progressbar.html" /> <get src="${url}Slider" dest="${docs.dir}slider.html" /> + <get src="${url}Tooltip" dest="${docs.dir}tooltip.html" /> <get src="${url}Tabs" dest="${docs.dir}tabs.html" /> <get src="${url}Position" dest="${docs.dir}position.html" /> diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index f74f0f106..fd373f0e4 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -11,6 +11,7 @@ <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.menu.js"></script> <script src="../../ui/jquery.ui.autocomplete.js"></script> + <script src="../../ui/jquery.ui.tooltip.js"></script> <link rel="stylesheet" href="../demos.css"> <style> .ui-button { margin-left: -1px; } @@ -66,8 +67,10 @@ }); if ( !valid ) { // remove invalid value, as it didn't match anything - $( this ).val( "" ); - select.val( "" ); + $(this).val( "").attr( "title", value + " didn't match any item" ).tooltip( "open" ); + setTimeout( function() { + input.tooltip( "close" ).attr( "title", "" ); + }, 2500 ); input.data( "autocomplete" ).term = ""; return false; } @@ -106,6 +109,12 @@ input.autocomplete( "search", "" ); input.focus(); }); + + input.tooltip( { + position: { + offset: (this.button.width() + 5) + " 0" + } + }).tooltip( "widget" ).addClass( "ui-state-highlight" ); }, destroy: function() { diff --git a/demos/index.html b/demos/index.html index 298803d2f..c249ef1be 100644 --- a/demos/index.html +++ b/demos/index.html @@ -28,6 +28,7 @@ <script src="../ui/jquery.ui.sortable.js"></script> <script src="../ui/jquery.ui.spinner.js"></script> <script src="../ui/jquery.ui.tabs.js"></script> + <script src="../ui/jquery.ui.tooltip.js"></script> <script src="../ui/jquery.effects.core.js"></script> <script src="../ui/jquery.effects.blind.js"></script> <script src="../ui/jquery.effects.bounce.js"></script> @@ -276,6 +277,7 @@ <dd><a href="slider/index.html">Slider</a></dd> <dd><a href="spinner/index.html">Spinner</a></dd> <dd><a href="tabs/index.html">Tabs</a></dd> + <dd><a href="tooltip/index.html">Tooltip</a></dd> <dt>Effects</dt> <dd><a href="animate/index.html">Color Animation</a></dd> <dd><a href="toggleClass/index.html">Toggle Class</a></dd> diff --git a/demos/tooltip/ajax/content1.html b/demos/tooltip/ajax/content1.html new file mode 100644 index 000000000..a1401b26d --- /dev/null +++ b/demos/tooltip/ajax/content1.html @@ -0,0 +1 @@ +<p><strong>This content was loaded via ajax.</strong></p>
\ No newline at end of file diff --git a/demos/tooltip/ajax/content2.html b/demos/tooltip/ajax/content2.html new file mode 100644 index 000000000..f4132d731 --- /dev/null +++ b/demos/tooltip/ajax/content2.html @@ -0,0 +1 @@ +<p><strong>This other content was loaded via ajax.</strong></p>
\ No newline at end of file diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html new file mode 100644 index 000000000..eb6f3e038 --- /dev/null +++ b/demos/tooltip/custom-animation.html @@ -0,0 +1,55 @@ +<!doctype html> +<html lang="en"> +<head> + <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.4.4.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() { + $(".demo").tooltip({ + open: function() { + $(this).tooltip("widget").stop(false, true).hide().slideDown(); + }, + close: function() { + $(this).tooltip("widget").stop(false, true).show().slideUp(); + } + }); + }); + </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/demos/tooltip/default.html b/demos/tooltip/default.html new file mode 100644 index 000000000..a0d61147f --- /dev/null +++ b/demos/tooltip/default.html @@ -0,0 +1,48 @@ +<!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.4.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() { + $(".demo").tooltip(); + }); + </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>Hover the links above or use the tab key to cycle the focus on each element.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html new file mode 100644 index 000000000..05d3e0fc9 --- /dev/null +++ b/demos/tooltip/delegation-mixbag.html @@ -0,0 +1,73 @@ +<!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.4.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() { + $(".demo").tooltip({ + items: "[href], [title]", + content: function(response) { + var href = $(this).attr("href"); + if (/^#/.test(href)) { + return $(href).html(); + } else if (href) { + $.get(href, response); + return "loading..."; + } + return this.title; + } + }); + $("#footnotes").hide(); + }); + </script> + <style> + label { display: inline-block; width: 5em; } + </style> +</head> +<body> + +<div class="demo"> + <ul> + <li> + <a href="#footnote1">I'm a link to a footnote.</a> + </li> + <li> + <a href="#footnote2">I'm another link to a footnote.</a> + </li> + </ul> + <input title="This is just an input, nothing special" /> + + <ul> + <li> + <a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a> + </li> + <li> + <a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a> + </li> + </ul> + + <div id="footnotes"> + <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> + <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> + </div> +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html new file mode 100644 index 000000000..46ab4e9dc --- /dev/null +++ b/demos/tooltip/forms.html @@ -0,0 +1,71 @@ +<!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.4.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().unbind(".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: 210px; } + </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>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> diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html new file mode 100644 index 000000000..6bc9c1e5c --- /dev/null +++ b/demos/tooltip/index.html @@ -0,0 +1,21 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Tooltip Demos</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> +</head> +<body> + +<div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> + <li><a href="forms.html">Forms with tooltips</a></li> + <li><a href="tracking.html">Track the mouse</a></li> + <li><a href="custom-animation.html">Custom animation</a></li> + <li><a href="delegation-mixbag.html">Delegation Mixbag</a></li> + </ul> +</div> + +</body> +</html> diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html new file mode 100644 index 000000000..495d1aca9 --- /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.4.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() { + $(".demo").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/unit/index.html b/tests/unit/index.html index 1566cfc38..f45499c2b 100644 --- a/tests/unit/index.html +++ b/tests/unit/index.html @@ -19,28 +19,6 @@ } </style> - <script type="text/javascript" src="../../jquery-1.4.4.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.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - - <script type="text/javascript" src="../../external/jquery.cookie.js"></script> - <script type="text/javascript" src="../jquery.simulate.js"></script> - </head> <body> @@ -71,6 +49,7 @@ <li><a href="progressbar/progressbar.html">Progressbar</a></li> <li><a href="slider/slider.html">Slider</a></li> <li><a href="tabs/tabs.html">Tabs</a></li> + <li><a href="tooltip/tooltip.html">Tooltip</a></li> </ul> <h2>Utilities</h2> diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html new file mode 100644 index 000000000..33c754394 --- /dev/null +++ b/tests/unit/tooltip/tooltip.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Tooltip Test Suite</title> + + <link type="text/css" href="../../../themes/base/jquery.ui.tooltip.css" rel="stylesheet" /> + + <script type="text/javascript" src="../../../jquery-1.4.4.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 rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> + <script type="text/javascript" src="../../../external/qunit.js"></script> + <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> + + <script type="text/javascript" src="tooltip_core.js"></script> + <script type="text/javascript" src="tooltip_defaults.js"></script> + <script type="text/javascript" src="tooltip_events.js"></script> + <script type="text/javascript" src="tooltip_methods.js"></script> + <script type="text/javascript" src="tooltip_options.js"></script> + <script type="text/javascript" src="tooltip_tickets.js"></script> + +</head> +<body> + +<h1 id="qunit-header">jQuery UI Tooltip Test Suite</h1> +<h2 id="qunit-banner"></h2> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"> +</ol> + +<div id="main" style="position: absolute; top: -10000px; left: -10000px;"> + <div> + <a id="tooltipped1" href="#" title="anchortitle">anchor</a> + <input title="inputtitle" /> + </div> +</div> + +</body> +</html> diff --git a/tests/unit/tooltip/tooltip_core.js b/tests/unit/tooltip/tooltip_core.js new file mode 100644 index 000000000..247927df4 --- /dev/null +++ b/tests/unit/tooltip/tooltip_core.js @@ -0,0 +1,11 @@ +/* + * tooltip_core.js + */ + + +(function($) { + +module("tooltip: core"); + + +})(jQuery); diff --git a/tests/unit/tooltip/tooltip_defaults.js b/tests/unit/tooltip/tooltip_defaults.js new file mode 100644 index 000000000..419d7a085 --- /dev/null +++ b/tests/unit/tooltip/tooltip_defaults.js @@ -0,0 +1,16 @@ +/* + * tooltip_defaults.js + */ + +var tooltip_defaults = { + disabled: false, + items: "[title]", + content: $.ui.tooltip.prototype.options.content, + position: { + my: "left center", + at: "right center", + offset: "15 0" + } +}; + +commonWidgetTests('tooltip', { defaults: tooltip_defaults }); diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js new file mode 100644 index 000000000..35620df47 --- /dev/null +++ b/tests/unit/tooltip/tooltip_events.js @@ -0,0 +1,54 @@ +/* + * tooltip_events.js + */ +(function($) { + +module("tooltip: events"); + +test("programmatic triggers", function() { + expect(2); + var e = $("#tooltipped1").tooltip({ + open: function(event, ui) { + same( event.type, "tooltipopen" ); + }, + close: function(event, ui) { + same( event.type, "tooltipclose" ); + } + }); + e.tooltip("open").tooltip("close"); + e.tooltip("destroy"); +}); + +test("mouse events", function() { + expect(4); + var e = $("#tooltipped1").tooltip({ + open: function(event, ui) { + same( event.type, "tooltipopen" ); + same( event.originalEvent.type, "mouseover" ); + }, + close: function(event, ui) { + same( event.type, "tooltipclose" ); + same( event.originalEvent.type, "mouseout" ); + } + }); + e.trigger("mouseover").trigger("mouseout"); + e.tooltip("destroy"); +}); + +test("focus events", function() { + expect(4); + var e = $("#tooltipped1").tooltip({ + open: function(event, ui) { + same( event.type, "tooltipopen" ); + same( event.originalEvent.type, "focus" ); + }, + close: function(event, ui) { + same( event.type, "tooltipclose" ); + same( event.originalEvent.type, "blur" ); + } + }); + e.trigger("focus").trigger("blur"); + e.tooltip("destroy"); +}); + +})(jQuery); diff --git a/tests/unit/tooltip/tooltip_methods.js b/tests/unit/tooltip/tooltip_methods.js new file mode 100644 index 000000000..ace1a1288 --- /dev/null +++ b/tests/unit/tooltip/tooltip_methods.js @@ -0,0 +1,30 @@ +/* + * tooltip_methods.js + */ +(function($) { + + +module("tooltip: methods"); + +test("destroy", function() { + var beforeHtml = $("#tooltipped1").parent().html(); + var afterHtml = $("#tooltipped1").tooltip().tooltip("destroy").parent().html(); + equal( afterHtml, beforeHtml ); +}); + +test("open", function() { + var e = $("#tooltipped1").tooltip(); + ok( $(".ui-tooltip").is(":hidden") ); + e.tooltip("open"); + ok( $(".ui-tooltip").is(":visible") ); + $(":ui-tooltip").tooltip("destroy"); +}); + +test("widget", function() { + var tooltip = $("#tooltipped1").tooltip(); + same(tooltip.tooltip("widget")[0], $(".ui-tooltip")[0]); + same(tooltip.tooltip("widget").end()[0], tooltip[0]); +}); + + +})(jQuery); diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js new file mode 100644 index 000000000..6962d1e86 --- /dev/null +++ b/tests/unit/tooltip/tooltip_options.js @@ -0,0 +1,54 @@ +/* + * tooltip_options.js + */ +(function($) { + +module("tooltip: options", { + teardown: function() { + $(":ui-tooltip").tooltip("destroy"); + } +}); + + +test("option: items", function() { + ok(false, "missing items test"); +}); + +test("content: default", function() { + $("#tooltipped1").tooltip().tooltip("open"); + same( $(".ui-tooltip").text(), "anchortitle" ); +}); + +test("content: return string", function() { + $("#tooltipped1").tooltip({ + content: function() { + return "customstring"; + } + }).tooltip("open"); + same( $(".ui-tooltip").text(), "customstring" ); +}); + +test("content: return jQuery", function() { + $("#tooltipped1").tooltip({ + content: function() { + return $("<div></div>").html("cu<b>s</b>tomstring"); + } + }).tooltip("open"); + same( $(".ui-tooltip").text(), "customstring" ); +}); + +test("content: callback string", function() { + stop(); + $("#tooltipped1").tooltip({ + content: function(response) { + response("customstring2"); + setTimeout(function() { + same( $(".ui-tooltip").text(), "customstring2" ); + start(); + }, 100) + } + }).tooltip("open"); + +}); + +})(jQuery); diff --git a/tests/unit/tooltip/tooltip_tickets.js b/tests/unit/tooltip/tooltip_tickets.js new file mode 100644 index 000000000..5d6d0ef86 --- /dev/null +++ b/tests/unit/tooltip/tooltip_tickets.js @@ -0,0 +1,10 @@ +/* + * tooltip_tickets.js + */ +(function($) { + +module("tooltip: tickets"); + + + +})(jQuery); diff --git a/tests/visual/compound/tabs_tooltips.html b/tests/visual/compound/tabs_tooltips.html new file mode 100644 index 000000000..00046fe0d --- /dev/null +++ b/tests/visual/compound/tabs_tooltips.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>Compound Visual Test : Tabs in Tabs</title> + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> + <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.tabs.js"></script> + <script type="text/javascript"> + $(function() { + $("#tabs").tabs(); + $("a").tooltip(); + }); + </script> +</head> +<body> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1" title="first tab tooltip">First</a></li> + <li><a href="#tabs-2" title="second tab tooltip">Second</a></li> + </ul> + <div id="tabs-1"> + <a href="#" title="title content">label</a> + </div> + <div id="tabs-2"> + <a href="#" title="other title content">other label</a> + </div> +</div> + +</body> +</html> diff --git a/tests/visual/compound/widgets_in_dialog.html b/tests/visual/compound/widgets_in_dialog.html index dc1b551cf..809ee5656 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/tests/visual/index.html b/tests/visual/index.html index 04e23fddd..2a556dc89 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -21,6 +21,7 @@ <li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li> <li><a href="compound/sortable_accordion_sortable_tabs.html">Accordion within Tabs, both Sortable</a></li> <li><a href="compound/tabs_tabs.html">Tabs contains Tabs</a></li> + <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> <li><a href="compound/widgets_in_dialog.html">All Widgets within a Dialog</a></li> </ul> @@ -53,6 +54,7 @@ <li><a href="slider/slider.html">Slider</a></li> <li><a href="spinner/spinner.html">Spinner</a></li> <li><a href="tabs/tabs.html">Tabs</a></li> + <li><a href="tooltip/tooltip.html">Tooltip</a></li> </ul> </body> diff --git a/tests/visual/tooltip/ajaxcontent.php b/tests/visual/tooltip/ajaxcontent.php new file mode 100644 index 000000000..a689a734d --- /dev/null +++ b/tests/visual/tooltip/ajaxcontent.php @@ -0,0 +1,2 @@ +<?php sleep(1); ?> +<strong>Hello</strong> world!
\ No newline at end of file diff --git a/tests/visual/tooltip/callout.html b/tests/visual/tooltip/callout.html new file mode 100644 index 000000000..3ef694987 --- /dev/null +++ b/tests/visual/tooltip/callout.html @@ -0,0 +1,213 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Tooltip Visual Test: Default</title> + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css"> + <script type="text/javascript" src="../../../jquery-1.3.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"> + $.widget("ui.callout", { + _init: function() { + this.element.append('<div class="ui-tooltip-pointer ui-widget-content"><div class="ui-tooltip-pointer-inner" style="border-right-color:rgb(255, 255, 255)"></div></div>'); + }, + pointAt: function(target) { + target = $(target); + var tx = target.offset().left + target.width() / 2, + ty = target.offset().top + target.height() / 2, + dx = this.element.offset().left + this.element.width() / 2, + dy = this.element.offset().top + this.element.height() / 2; + function d(a, b) { + return a > b ? a - b : b - a; + } + this.element.attr("class", this.element.attr("class").replace(/(.+)ui-tooltip-arrow-..(.+)?/, "$1 $2")); + if (dx < tx && d(dx, tx) > d(dy, tx)) { + this.element.addClass("ui-tooltip-arrow-rc"); + } + if (dx > tx && d(dx, tx) > d(dy, ty)) { + this.element.addClass("ui-tooltip-arrow-lc"); + } + if (dy > ty && d(dx, tx) < d(dy, ty)) { + this.element.addClass("ui-tooltip-arrow-tc"); + } + if (dy < ty && d(dx, tx) < d(dy, ty)) { + this.element.addClass("ui-tooltip-arrow-bc"); + } + + // fix inner borders + $('.ui-tooltip-pointer-inner', this.element).each(function(){ + var pt = $(this).parent().parent(); + var bColor = pt.css('backgroundColor'); + $(this).css({ + borderLeftColor: '', + borderRightColor: '', + borderTopColor: '', + borderBottomColor: '' + }); + if(pt.is('.ui-tooltip-arrow-rb,.ui-tooltip-arrow-rc,.ui-tooltip-arrow-rt')){ $(this).css('border-left-color', bColor); } + else if(pt.is('.ui-tooltip-arrow-br,.ui-tooltip-arrow-bc,.ui-tooltip-arrow-bl')){ $(this).css('border-top-color', bColor); } + else if(pt.is('.ui-tooltip-arrow-lb,.ui-tooltip-arrow-lc,.ui-tooltip-arrow-lt')){ $(this).css('border-right-color', bColor); } + else { $(this).css('border-bottom-color', bColor); } + }); + } + }); + + $(function() { + $.ui.tooltip.prototype.options.show = function(event, ui) { + $(this).tooltip("widget").callout("pointAt", ui.target); + } + + function enable() { + // default + $("#context1, form input").tooltip(); + + // custom class, replaces ui-widget-content + $("#context2").tooltip({ + tooltipClass: "ui-widget-header" + }); + $("#right1").tooltip({ + tooltipClass: "ui-state-error" + }); + + // synchronous content + $("#see-footnote").tooltip({ + content: function() { + return $($(this).attr("href")).html(); + } + }); + // asynchronous content + $("#ajax").tooltip({ + content: function(response) { + $.get("ajaxcontent.html", response); + } + }); + + // custom position + $("#right2").tooltip({ + position: { + my: "center top", + at: "center bottom", + offset: "0 10" + }, + tooltipClass: "ui-state-highlight" + }); + + $(".ui-tooltip").callout(); + } + enable(); + + $("#disable").toggle(function() { + $("*").tooltip("disable"); + }, function() { + $("*").tooltip("enable"); + }); + $("#toggle").toggle(function() { + $("*").tooltip("destroy"); + }, function() { + enable(); + }); + }); + </script> + + <style> + .ui-tooltip .ui-tooltip-pointer,.ui-tooltip .ui-tooltip-pointer-inner { position:absolute; width:0; height:0; background:none; } + + /*top*/ + .ui-tooltip-arrow-tr .ui-tooltip-pointer,.ui-tooltip-arrow-tc .ui-tooltip-pointer,.ui-tooltip-arrow-tl .ui-tooltip-pointer { top:-14px; border-top:0; border-bottom-width:14px; } + .ui-tooltip-arrow-tr .ui-tooltip-pointer { border-left:18px dotted transparent; border-right:0; right:10px; } + .ui-tooltip-arrow-tc .ui-tooltip-pointer { border-left:10px dotted transparent; border-right:10px dotted transparent; left:50%; margin-left:-10px; } + .ui-tooltip-arrow-tl .ui-tooltip-pointer { border-left:0; border-right:18px dotted transparent; left:10px; } + .ui-tooltip-arrow-tr .ui-tooltip-pointer-inner,.ui-tooltip-arrow-tc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-tl .ui-tooltip-pointer-inner { border-bottom:10px solid #fff; bottom:-14px; } + .ui-tooltip-arrow-tr .ui-tooltip-pointer-inner { border-left:12px dotted transparent; border-right:0; right:2px; } + .ui-tooltip-arrow-tc .ui-tooltip-pointer-inner { border-left:8px dotted transparent; border-right:8px dotted transparent; left:-8px; } + .ui-tooltip-arrow-tl .ui-tooltip-pointer-inner { border-left:0; border-right:12px dotted transparent; left:2px; } + + /*right*/ + .ui-tooltip-arrow-rb .ui-tooltip-pointer,.ui-tooltip-arrow-rc .ui-tooltip-pointer,.ui-tooltip-arrow-rt .ui-tooltip-pointer { right:-14px; border-right:0; border-left-width:14px; } + .ui-tooltip-arrow-rb .ui-tooltip-pointer { border-bottom:0; border-top:18px dotted transparent; bottom:10px; } + .ui-tooltip-arrow-rc .ui-tooltip-pointer { border-bottom:10px dotted transparent; border-top:10px dotted transparent; bottom:50%; margin-bottom:-10px; } + .ui-tooltip-arrow-rt .ui-tooltip-pointer { border-bottom:18px dotted transparent; border-top:0; top:10px; } + .ui-tooltip-arrow-rb .ui-tooltip-pointer-inner,.ui-tooltip-arrow-rc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-rt .ui-tooltip-pointer-inner { border-left:10px solid #fff; left:-14px; } + .ui-tooltip-arrow-rb .ui-tooltip-pointer-inner { border-bottom:0; border-top:12px dotted transparent; bottom:2px; } + .ui-tooltip-arrow-rc .ui-tooltip-pointer-inner { border-bottom:8px dotted transparent; border-top:8px dotted transparent; bottom:-8px; } + .ui-tooltip-arrow-rt .ui-tooltip-pointer-inner { border-bottom:12px dotted transparent; border-top:0; top:2px; } + + /*bottom*/ + .ui-tooltip-arrow-br .ui-tooltip-pointer,.ui-tooltip-arrow-bc .ui-tooltip-pointer,.ui-tooltip-arrow-bl .ui-tooltip-pointer { bottom:-14px; border-bottom:0; border-top-width:14px; } + .ui-tooltip-arrow-br .ui-tooltip-pointer { border-left:18px dotted transparent; border-right:0; right:10px; } + .ui-tooltip-arrow-bc .ui-tooltip-pointer { border-left:10px dotted transparent; border-right:10px dotted transparent; left:50%; margin-left:-10px; } + .ui-tooltip-arrow-bl .ui-tooltip-pointer { border-left:0; border-right:18px dotted transparent; left:10px; } + .ui-tooltip-arrow-br .ui-tooltip-pointer-inner,.ui-tooltip-arrow-bc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-bl .ui-tooltip-pointer-inner { border-top:10px solid #fff; top:-14px; } + .ui-tooltip-arrow-br .ui-tooltip-pointer-inner { border-left:12px dotted transparent; border-right:0; right:2px; } + .ui-tooltip-arrow-bc .ui-tooltip-pointer-inner { border-left:8px dotted transparent; border-right:8px dotted transparent; left:-8px; } + .ui-tooltip-arrow-bl .ui-tooltip-pointer-inner { border-left:0; border-right:12px dotted transparent; left:2px; } + + /*left*/ + .ui-tooltip-arrow-lb .ui-tooltip-pointer,.ui-tooltip-arrow-lc .ui-tooltip-pointer,.ui-tooltip-arrow-lt .ui-tooltip-pointer { left:-14px; border-left:0; border-right-width:14px; } + .ui-tooltip-arrow-lb .ui-tooltip-pointer { border-bottom:0; border-top:18px dotted transparent; bottom:10px; } + .ui-tooltip-arrow-lc .ui-tooltip-pointer { border-bottom:10px dotted transparent; border-top:10px dotted transparent; bottom:50%; margin-bottom:-10px; } + .ui-tooltip-arrow-lt .ui-tooltip-pointer { border-bottom:18px dotted transparent; border-top:0; top:10px; } + .ui-tooltip-arrow-lb .ui-tooltip-pointer-inner,.ui-tooltip-arrow-lc .ui-tooltip-pointer-inner,.ui-tooltip-arrow-lt .ui-tooltip-pointer-inner { border-right:10px solid #fff; right:-14px; } + .ui-tooltip-arrow-lb .ui-tooltip-pointer-inner { border-bottom:0; border-top:12px dotted transparent; bottom:2px; } + .ui-tooltip-arrow-lc .ui-tooltip-pointer-inner { border-bottom:8px dotted transparent; border-top:8px dotted transparent; bottom:-8px; } + </style> +</head> +<body> + +<div style="width:300px"> + <ul id="context1" class="ui-widget ui-widget-header"> + <li><a href="#" title="Tooltip text 1">Anchor 1</a></li> + <li><a href="#" title="Tooltip text 2">Anchor 2</a></li> + <li><a href="#" title="Tooltip text 3">Anchor 3</a></li> + <li><a href="#" title="Tooltip text 4 more Tooltip text Tooltip text ">Anchor 4</a></li> + <li><a href="#" title="Tooltip text 5 more Tooltip text Tooltip text ">Anchor 5</a></li> + <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li> + </ul> + + <div id="right1" style="position: absolute; right: 1em" title="right aligned element"> + collision detection should kick in around here + </div> + + <div style="margin: 2em 0"> + <a id="see-footnote" href="#footnote">I'm a link to a footnote.</a> + </div> + + <div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position"> + right aligned with custom position + </div> + + <div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen"> + gets its content via ajax + </div> + + <div id="context2" class="ui-widget ui-widget-content"> + <span title="something" style="border:1px solid blue">span</span> + <div title="something else" style="border:1px solid red;"> + div + <span title="something more" style="border:1px solid green;">nested span</span> + </div> + </div> + + <form style="margin: 2em 0;"> + <div> + <label for="first">First Name:</label> + <input id="first" title="Your first name is optional" /> + </div> + <div> + <label for="last">Last Name:</label> + <input id="last" title="Your last name is optional" /> + </div> + </form> + + <div id="footnote">This is <strong>the</strong> footnote, including other elements</div> + + <button id="disable">Toggle disabled</button> + <button id="toggle">Toggle widget</button> +</div> + + +</body> +</html> diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html new file mode 100644 index 000000000..fb2690a54 --- /dev/null +++ b/tests/visual/tooltip/tooltip.html @@ -0,0 +1,181 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Tooltip Visual Test: Default</title> + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> + <script type="text/javascript" src="../../../jquery-1.4.4.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.button.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> + <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> + $(function() { + $.fn.themeswitcher && $('<div/>').css({ + position: "absolute", + right: 10, + top: 10 + }).appendTo(document.body).themeswitcher(); + + function enable() { + // default + $("#context1, form, #childish").tooltip(); + + // custom class, replaces ui-widget-content + $("#context2").tooltip().each(function() { + $(this).tooltip("widget").addClass("ui-widget-header"); + }) + $("#right1").tooltip().tooltip("widget").addClass("ui-state-error"); + + // synchronous content + $("#footnotes").tooltip({ + items: "[href^=#]", + content: function() { + return $($(this).attr("href")).html(); + } + }); + // asynchronous content + $("#ajax").tooltip({ + content: function(response) { + $.get("ajaxcontent.php", response); + return "Loading..."; + } + }); + // asynchronous content with caching + var content; + $("#ajax2").tooltip({ + content: function(response) { + if (content) { + return content; + } + $.ajax({ + url: "ajaxcontent.php", + cache: false, + success: function(result) { + content = result; + response(result); + } + }); + return "Loading..."; + } + }); + + // custom position + $("#right2").tooltip({ + position: { + my: "center top", + at: "center bottom", + offset: "0 10" + } + }).tooltip("widget").addClass("ui-state-highlight"); + + $("#button1").button(); + $("#button2").button({ + icons: { + primary: "ui-icon-wrench" + } + }); + $("#button3, #button4").button({ + icons: { + primary: "ui-icon-wrench" + }, + text: false + }); + $("#buttons").tooltip({ + position: { + my: "center bottom", + at: "center top", + offset: "0 -5" + } + }); + } + enable(); + + $("#disable").toggle(function() { + $("*").tooltip("disable"); + }, function() { + $("*").tooltip("enable"); + }); + $("#toggle").toggle(function() { + $("*").tooltip("destroy"); + }, function() { + enable(); + }); + }); + </script> +</head> +<body> + +<div style="width:300px"> + <ul id="context1" class="ui-widget ui-widget-header"> + <li><a href="#" title="Tooltip text 1">Anchor 1</a></li> + <li><a href="#" title="Tooltip text 2">Anchor 2</a></li> + <li><a href="#" title="Tooltip text 3">Anchor 3</a></li> + <li><a href="#" title="Tooltip text 4 more Tooltip text Tooltip text ">Anchor 4</a></li> + <li><a href="#" title="Tooltip text 5 more Tooltip text Tooltip text ">Anchor 5</a></li> + <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li> + </ul> + + <div id="right1" style="position: absolute; right: 1em" title="right aligned element"> + collision detection should kick in around here + </div> + + <div id="footnotes" style="margin: 2em 0"> + <a href="#footnote1">I'm a link to a footnote.</a> + <a href="#footnote2">I'm another link to a footnote.</a> + </div> + + <div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position"> + right aligned with custom position + </div> + + <div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen"> + gets its content via ajax + </div> + <div id="ajax2" style="width: 100px;" class="ui-widget-content" title="never be seen"> + gets its content via ajax, caches the response + </div> + + <div id="context2" class="ui-widget ui-widget-content"> + <span title="something" style="border:1px solid blue">span</span> + <div title="something else" style="border:1px solid red;"> + div + <span title="something more" style="border:1px solid green;">nested span</span> + </div> + </div> + + <div id="childish" class="ui-widget ui-widget-content" style="margin: 2em 0; border: 1px solid black;" title="element with child elements"> + Text in <strong>bold</strong>. + </div> + + <form style="margin: 2em 0;"> + <div> + <label for="first">First Name:</label> + <input id="first" title="Your first name is optional" /> + </div> + <div> + <label for="last">Last Name:</label> + <input id="last" title="Your last name is optional" /> + </div> + </form> + + <div id="buttons"> + <button id="button1" title="Button Tooltip">Button Label</button> + <button id="button2" title="Icon Button">Button with Icon</button> + <button id="button3">Icon Only Button 1</button> + <button id="button4">Icon Only Button 2</button> + </div> + + <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> + <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> + + <button id="disable">Toggle disabled</button> + <button id="toggle">Toggle widget</button> +</div> + +<div style="height: 2000px"></div> + +</body> +</html> diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index 34d2c8fc6..733cb755e 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -21,3 +21,4 @@ @import url("jquery.ui.slider.css"); @import url("jquery.ui.spinner.css"); @import url("jquery.ui.tabs.css"); +@import url("jquery.ui.tooltip.css"); diff --git a/themes/base/jquery.ui.tooltip.css b/themes/base/jquery.ui.tooltip.css new file mode 100644 index 000000000..145b079d2 --- /dev/null +++ b/themes/base/jquery.ui.tooltip.css @@ -0,0 +1,16 @@ +/* Tooltip +----------------------------------*/ +.ui-tooltip { + padding:8px; + position:absolute; + z-index:9999; + -o-box-shadow: 0 0 5px #aaa; + -moz-box-shadow: 0 0 5px #aaa; + -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; +} +body .ui-tooltip { border-width:2px; } diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js new file mode 100644 index 000000000..ea3cde339 --- /dev/null +++ b/ui/jquery.ui.tooltip.js @@ -0,0 +1,137 @@ +/* + * jQuery UI Tooltip @VERSION + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Tooltip + * + * Depends: + * jquery.ui.core.js + * jquery.ui.widget.js + * jquery.ui.position.js + */ +(function($) { + +var increments = 0; + +$.widget("ui.tooltip", { + options: { + items: "[title]", + content: function() { + return $(this).attr("title"); + }, + position: { + my: "left center", + at: "right center", + offset: "15 0" + } + }, + _create: function() { + var self = this; + this.tooltip = $("<div></div>") + .attr("id", "ui-tooltip-" + increments++) + .attr("role", "tooltip") + .attr("aria-hidden", "true") + .addClass("ui-tooltip ui-widget ui-corner-all ui-widget-content") + .appendTo(document.body) + .hide(); + this.tooltipContent = $("<div></div>") + .addClass("ui-tooltip-content") + .appendTo(this.tooltip); + this.opacity = this.tooltip.css("opacity"); + this.element + .bind("focus.tooltip mouseover.tooltip", function(event) { + self.open( event ); + }) + .bind("blur.tooltip mouseout.tooltip", function(event) { + self.close( event ); + }); + }, + + enable: function() { + this.options.disabled = false; + }, + + disable: function() { + this.options.disabled = true; + }, + + destroy: function() { + this.tooltip.remove(); + $.Widget.prototype.destroy.apply(this, arguments); + }, + + widget: function() { + return this.element.pushStack(this.tooltip.get()); + }, + + open: function(event) { + var target = $(event && event.target || this.element).closest(this.options.items); + // already visible? possible when both focus and mouseover events occur + if (this.current && this.current[0] == target[0]) + return; + var self = this; + this.current = target; + this.currentTitle = target.attr("title"); + var content = this.options.content.call(target[0], function(response) { + // IE may instantly serve a cached response, need to give it a chance to finish with _show before that + setTimeout(function() { + // ignore async responses that come in after the tooltip is already hidden + if (self.current == target) + self._show(event, target, response); + }, 13); + }); + if (content) { + self._show(event, target, content); + } + }, + + _show: function(event, target, content) { + if (!content) + return; + + target.attr("title", ""); + + if (this.options.disabled) + return; + + this.tooltipContent.html(content); + this.tooltip.css({ + top: 0, + left: 0 + }).show().position( $.extend({ + of: target + }, this.options.position )).hide(); + + this.tooltip.attr("aria-hidden", "false"); + target.attr("aria-describedby", this.tooltip.attr("id")); + + this.tooltip.stop(false, true).fadeIn(); + + this._trigger( "open", event ); + }, + + close: function(event) { + if (!this.current) + return; + + var current = this.current; + this.current = null; + current.attr("title", this.currentTitle); + + if (this.options.disabled) + return; + + current.removeAttr("aria-describedby"); + this.tooltip.attr("aria-hidden", "true"); + + this.tooltip.stop(false, true).fadeOut(); + + this._trigger( "close", event ); + } + +}); + +})(jQuery);
\ No newline at end of file |