diff --git a/demos/index.html b/demos/index.html index db3e2bf83..c9f690921 100644 --- a/demos/index.html +++ b/demos/index.html @@ -25,6 +25,7 @@ + @@ -268,6 +269,7 @@
Progressbar
Slider
Tabs
+
Tooltip
Effects
Color Animation
Toggle Class
diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html new file mode 100644 index 000000000..22dac4f90 --- /dev/null +++ b/demos/tooltip/default.html @@ -0,0 +1,48 @@ + + + + jQuery UI Tooltip - Default demo + + + + + + + + + + + + +
+ +

Tooltips 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. +

+

But as it's not a native tooltip, it can be styled. Any themes built with + ThemeRoller + will also style tooltip's accordingly.

+

Tooltip's are also useful for form elements, to show some additional information in the context of each field.

+

+

Click the field to see the tooltip; when you tab out of the field, it gets hidden.

+ +
+ + + +
+ +

Hover the links above or use the tab key to cycle the focus on each element.

+ +
+ + + + + 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 @@ + + + + jQuery UI Tooltip - Default demo + + + + + + + + + + + + + +
+ +
+
+
+ + + ? +
+
+ + + ? +
+
+ + + ? +
+
+
+ +
+ + + +
+ +

Hover the questionmark-buttons or use the button below to display the help texts all at once. Click again to hide them.

+ +
+ + + + + diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html new file mode 100644 index 000000000..ed5cd10e5 --- /dev/null +++ b/demos/tooltip/index.html @@ -0,0 +1,21 @@ + + + + jQuery UI Tooltip Demos + + + + +
+

Examples

+ +
+ + + 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 @@ + + + + jQuery UI Tooltip - Default demo + + + + + + + + + + + + +
+ +

Tooltips 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. +

+

But as it's not a native tooltip, it can be styled. Any themes built with + ThemeRoller + will also style tooltip's accordingly.

+

Tooltip's are also useful for form elements, to show some additional information in the context of each field.

+

+

Click the field to see the tooltip; when you tab out of the field, it gets hidden.

+ +
+ + + +
+ +

Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.

+ +
+ + + + + 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 @@ + + + + + Compound Visual Test : Tabs in Tabs + + + + + + + + + + + + +
+ +
+ label +
+
+ other label +
+
+ + + 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 @@ + @@ -76,11 +79,11 @@
- +
-
+
@@ -43,6 +44,7 @@
  • Progressbar
  • Slider
  • Tabs
    • +
  • Tooltip
    • 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 @@ + +Hello 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 @@ + + + + Tooltip Visual Test: Default + + + + + + + + + + + + + +
    + + +
    + collision detection should kick in around here +
    + +
    + I'm a link to a footnote. +
    + +
    + right aligned with custom position +
    + +
    + gets its content via ajax +
    + +
    + span +
    + div + nested span +
    +
    + +
    +
    + + +
    +
    + + +
    +
    + +
    This is the footnote, including other elements
    + + + +
    + + + + diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html new file mode 100644 index 000000000..3f1ae3878 --- /dev/null +++ b/tests/visual/tooltip/tooltip.html @@ -0,0 +1,149 @@ + + + + Tooltip Visual Test: Default + + + + + + + + + + + + + +
    + + +
    + collision detection should kick in around here +
    + +
    + I'm a link to a footnote. +
    + +
    + right aligned with custom position +
    + +
    + gets its content via ajax +
    + +
    + span +
    + div + nested span +
    +
    + +
    + Text in bold. +
    + +
    +
    + + +
    +
    + + +
    +
    + + + + + +
    This is the footnote, including other elements
    + + + +
    + + + + diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index eed06a277..b6a74984b 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -9,3 +9,4 @@ @import url("jquery.ui.resizable.css"); @import url("jquery.ui.slider.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..6d8e988bd --- /dev/null +++ b/themes/base/jquery.ui.tooltip.css @@ -0,0 +1,14 @@ +/* Tooltip +----------------------------------*/ +.ui-tooltip { + padding:8px; width:100px; 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..166bff407 --- /dev/null +++ b/ui/jquery.ui.tooltip.js @@ -0,0 +1,145 @@ +/* + * jQuery UI Tooltip @VERSION + * + * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT (MIT-LICENSE.txt) + * and GPL (GPL-LICENSE.txt) licenses. + * + * http://docs.jquery.com/UI/Tooltip + * + * Depends: + * jquery.ui.core.js + * jquery.ui.widget.js + * jquery.ui.position.js + */ +(function($) { + +// role=application on body required for screenreaders to correctly interpret aria attributes +if( !$(document.body).is('[role]') ){ + $(document.body).attr('role','application'); +} + +var increments = 0; + +$.widget("ui.tooltip", { + options: { + tooltipClass: "ui-widget-content", + content: function() { + return $(this).attr("title"); + }, + position: { + my: "left center", + at: "right center", + offset: "15 0" + } + }, + _init: function() { + var self = this; + this.tooltip = $("
    ") + .attr("id", "ui-tooltip-" + increments++) + .attr("role", "tooltip") + .attr("aria-hidden", "true") + .addClass("ui-tooltip ui-widget ui-corner-all") + .addClass(this.options.tooltipClass) + .appendTo(document.body) + .hide(); + this.tooltipContent = $("
    ") + .addClass("ui-tooltip-content") + .appendTo(this.tooltip); + this.opacity = this.tooltip.css("opacity"); + this.element + .bind("focus.tooltip mouseenter.tooltip", function(event) { + self.open(); + }) + .bind("blur.tooltip mouseleave.tooltip", function(event) { + self.close(); + }); + }, + + 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.tooltip; + }, + + 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; + var self = this; + this.current = target; + this.currentTitle = target.attr("title"); + 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._show(target, response); + }); + if (content) { + self._show(target, content); + } + }, + + _show: function(target, content) { + if (!content) + return; + + target.attr("title", ""); + + if (this.options.disabled) + return; + + this.tooltipContent.html(content); + this.tooltip.css({ + top: 0, + left: 0 + }).position($.extend(this.options.position, { + of: target + })); + + this.tooltip.attr("aria-hidden", "false"); + target.attr("aria-describedby", this.tooltip.attr("id")); + + if (this.tooltip.is(":animated")) + this.tooltip.stop().show().fadeTo("normal", this.opacity); + else + this.tooltip.is(':visible') ? this.tooltip.fadeTo("normal", this.opacity) : this.tooltip.fadeIn(); + + this._trigger( "open" ); + }, + + close: function() { + if (!this.current) + return; + + var current = this.current.attr("title", this.currentTitle); + this.current = null; + + if (this.options.disabled) + return; + + current.removeAttr("aria-describedby"); + this.tooltip.attr("aria-hidden", "true"); + + if (this.tooltip.is(':animated')) + this.tooltip.stop().fadeTo("normal", 0); + else + this.tooltip.stop().fadeOut(); + + this._trigger( "close" ); + } + +}); + +})(jQuery); \ No newline at end of file