jQuery UI Tooltip - Default demo

From 6204e1a3c4197d4c612e786337ee371295364ee2 Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Thu, 8 Apr 2010 23:21:47 +0200 Subject: The accidental merge of tooltip into master was reverted in master, that revert got merged back into tooltip; now reverting that revert to get the tooltip stuff back, should then make it easy to merge into master once tooltip is done --- demos/index.html | 2 ++ demos/tooltip/default.html | 48 +++++++++++++++++++++++++++++++ demos/tooltip/forms.html | 69 +++++++++++++++++++++++++++++++++++++++++++++ demos/tooltip/index.html | 21 ++++++++++++++ demos/tooltip/tracking.html | 65 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 205 insertions(+) create mode 100644 demos/tooltip/default.html create mode 100644 demos/tooltip/forms.html create mode 100644 demos/tooltip/index.html create mode 100644 demos/tooltip/tracking.html (limited to 'demos') 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 @@

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.

Your age:

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

Default functionality

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

Your age:

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.

+ +

+ + + + + -- cgit v1.2.3 From e7882fa393dcd5effb8a8997f99622ab88774cad Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Thu, 8 Apr 2010 23:41:49 +0200 Subject: Use tooltip to display hint when combobox input doesn't match anything --- demos/autocomplete/combobox.html | 18 +++++++++++++++--- themes/base/jquery.ui.tooltip.css | 5 ++++- 2 files changed, 19 insertions(+), 4 deletions(-) (limited to 'demos') diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 3001f7d17..596423bc9 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -10,6 +10,7 @@ + @@ -61,6 +61,8 @@

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

A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.

+ diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html index ed5cd10e5..9b1efefe4 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -10,10 +10,8 @@

Examples

diff --git a/themes/base/jquery.ui.tooltip.css b/themes/base/jquery.ui.tooltip.css index 652bf3386..145b079d2 100644 --- a/themes/base/jquery.ui.tooltip.css +++ b/themes/base/jquery.ui.tooltip.css @@ -2,7 +2,6 @@ ----------------------------------*/ .ui-tooltip { padding:8px; - width:125px; position:absolute; z-index:9999; -o-box-shadow: 0 0 5px #aaa; -- cgit v1.2.3 From 8cba84c246e6c9df8af2fb974aff70e576f51961 Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Fri, 23 Apr 2010 09:40:24 +0200 Subject: Fixed typo in demo description --- demos/button/splitbutton.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'demos') diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html index 7e4d66038..c56ed5b2c 100644 --- a/demos/button/splitbutton.html +++ b/demos/button/splitbutton.html @@ -49,7 +49,7 @@

An example of a split button built with two buttons: A plan button with just text, one with only a primary icon +

An example of a split button built with two buttons: A plain button with just text, one with only a primary icon and no text. Both are grouped together in a set.

-- cgit v1.2.3 From 615022abd5c5ec74574cd6345d68b996c3d6d3c3 Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Tue, 26 Oct 2010 14:46:41 +0200 Subject: Tooltip: Update forms demo to programmatic-trigger only --- demos/tooltip/forms.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'demos') diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html index ac0529680..183debf81 100644 --- a/demos/tooltip/forms.html +++ b/demos/tooltip/forms.html @@ -12,7 +12,7 @@ + + + + + + + + + + +

+ +

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.

Your age:

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/demos/tooltip/index.html b/demos/tooltip/index.html index 9b1efefe4..e55575d4c 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -12,6 +12,7 @@

Default functionality

Forms with tooltips

Track the mouse

Custom animation

-- cgit v1.2.3 From 48a5977d3325869abd7b7ba835eb8ac331fd6eb5 Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Tue, 26 Oct 2010 17:07:22 +0200 Subject: Tooltip: Implementing event delegation support. --- demos/tooltip/ajax/content1.html | 1 + demos/tooltip/ajax/content2.html | 1 + demos/tooltip/custom-animation.html | 2 +- demos/tooltip/default.html | 2 +- demos/tooltip/delegation-mixbag.html | 73 ++++++++++++++++++++++++++++++++++ demos/tooltip/index.html | 1 + demos/tooltip/tracking.html | 2 +- tests/unit/tooltip/tooltip_defaults.js | 1 + tests/unit/tooltip/tooltip_events.js | 4 +- tests/unit/tooltip/tooltip_options.js | 5 +++ tests/visual/tooltip/tooltip.html | 45 +++++++++++---------- ui/jquery.ui.tooltip.js | 7 ++-- 12 files changed, 116 insertions(+), 28 deletions(-) create mode 100644 demos/tooltip/ajax/content1.html create mode 100644 demos/tooltip/ajax/content2.html create mode 100644 demos/tooltip/delegation-mixbag.html (limited to 'demos') 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 @@ +

This content was loaded via ajax.

\ 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 @@ +

This other content was loaded via ajax.

\ No newline at end of file diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index 585360d7c..1353e3b91 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -11,7 +11,7 @@ + + + +

+ I'm a link to a footnote. +
+ I'm another link to a footnote. +

+ + +

+ +

This is the footnote, including other elements

This is the other footnote, including other elements

+ + + +

+ +

Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.

+ +

+ + + + + diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html index e55575d4c..6bc9c1e5c 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -13,6 +13,7 @@

diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html index 9af4d0d09..286f01209 100644 --- a/demos/tooltip/tracking.html +++ b/demos/tooltip/tracking.html @@ -11,7 +11,7 @@