From: jzaefferer Date: Sun, 21 Mar 2010 21:28:32 +0000 (+0100) Subject: Copying files from old Googlecode dev branch for tooltip X-Git-Tag: 1.8.1~5^2~49^2~16 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=7dbf7ecfc1d01bd23de1fa2785d58b8451e64f56;p=jquery-ui.git Copying files from old Googlecode dev branch for tooltip --- 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..28c781b45 --- /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/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/tests/visual/index.html b/tests/visual/index.html index ad46ddf8d..8896076ec 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -43,6 +43,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..c0401be66 --- /dev/null +++ b/tests/visual/tooltip/tooltip.html @@ -0,0 +1,127 @@ + + + + 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/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..7659f2b4b --- /dev/null +++ b/themes/base/jquery.ui.tooltip.css @@ -0,0 +1,3 @@ +/*Tooltip and Pointer CSS*/ +.ui-tooltip { padding:8px; width:100px; position:absolute; z-index:9999; } +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..374139264 --- /dev/null +++ b/ui/jquery.ui.tooltip.js @@ -0,0 +1,134 @@ +/* + * 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($) { + +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 mouseover.tooltip", function(event) { + self.show($(event.target)); + }) + .bind("blur.tooltip mouseout.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; + }, + + show: function(target) { + // 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) { + if (self.current == target) + self.open(target, response); + }); + if (content) { + self.open(target, content); + } + }, + + open: function(target, content) { + if (!content) + return; + + target.attr("title", ""); + + if (this.options.disabled) + return; + + this.tooltipContent.html(content); + this.tooltip.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("show", null, { target: target }); + }, + + 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(); + + } + +}); + +})(jQuery); \ No newline at end of file