From af35f0bbc9064ec66bee19c730bf4cb9de2834db Mon Sep 17 00:00:00 2001 From: Scott González Date: Fri, 20 May 2011 16:25:04 -0400 Subject: Spinner: Changed casing of option numberformat -> numberFormat. --- demos/spinner/currency.html | 2 +- demos/spinner/decimal.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'demos') diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html index 8288e4c3d..1e9b37d08 100644 --- a/demos/spinner/currency.html +++ b/demos/spinner/currency.html @@ -27,7 +27,7 @@ max: 2500, step: 25, start: 1000, - numberformat: "C" + numberFormat: "C" }); }); diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html index 0a38fc51f..cdc659298 100644 --- a/demos/spinner/decimal.html +++ b/demos/spinner/decimal.html @@ -18,7 +18,7 @@ $(function() { $("#spinner").spinner({ step: 0.01, - numberformat: "n" + numberFormat: "n" }); $("#culture").change(function() { -- cgit v1.2.3 From be7da0239a5dbcd1a1458a5b642dc366fe626efe Mon Sep 17 00:00:00 2001 From: Scott González Date: Fri, 27 May 2011 08:32:48 -0400 Subject: Autocomplete demos: Coding standards. --- demos/autocomplete/categories.html | 4 ++-- demos/autocomplete/combobox.html | 15 +++++++++++---- demos/autocomplete/custom-data.html | 8 ++++---- demos/autocomplete/default.html | 2 +- demos/autocomplete/folding.html | 2 +- demos/autocomplete/maxheight.html | 4 ++-- demos/autocomplete/multiple-remote.html | 6 ++++-- demos/autocomplete/multiple.html | 2 +- demos/autocomplete/remote-jsonp.html | 10 ++++++---- demos/autocomplete/remote-with-cache.html | 6 ++++-- demos/autocomplete/remote.html | 10 ++++++---- 11 files changed, 42 insertions(+), 27 deletions(-) (limited to 'demos') diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html index 17ec6495d..d2a1bc5bd 100644 --- a/demos/autocomplete/categories.html +++ b/demos/autocomplete/categories.html @@ -47,7 +47,7 @@ { label: "andreas andersson", category: "People" }, { label: "andreas johnson", category: "People" } ]; - + $( "#search" ).catcomplete({ delay: 0, source: data @@ -59,7 +59,7 @@
- +
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 5fb3ffef9..b228c1cbb 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -14,9 +14,16 @@ - +
- +
diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html index 9351e8f3b..16472a36c 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -12,7 +12,9 @@ - - - - - - + + + + + + + -
-

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.

+

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 tooltips accordingly.

+

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

+

+

Hover the field to see the tooltip.

-

This demo shows how to customize animations. The tooltip is shown, after a delay of 250ms, using a slide down animation, and hidden, after another delay, without an animation.

-
- - diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html index 9d5502f2b..cfb61f2eb 100644 --- a/demos/tooltip/default.html +++ b/demos/tooltip/default.html @@ -1,48 +1,47 @@ - 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.

+

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 tooltips accordingly.

+

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

+

+

Hover the field to see the tooltip.

-

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 index 983b56bdf..0f91736b2 100644 --- a/demos/tooltip/forms.html +++ b/demos/tooltip/forms.html @@ -1,71 +1,87 @@ + jQuery UI Tooltip - Default demo - - - - - - - - - + + + + + + + + -
-
-
-
- - - ? -
-
- - - ? -
-
- - - ? -
-
-
+
+
+
+ + + ? +
+
+ + + ? +
+
+ + + ? +
+
+
-

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.

-

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 4ad189ed2..460c494e3 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -1,8 +1,9 @@ + jQuery UI Tooltip Demos - + diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html index dd5dc9d92..4cddb4437 100644 --- a/demos/tooltip/tracking.html +++ b/demos/tooltip/tracking.html @@ -1,64 +1,64 @@ - 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.

+

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 tooltips accordingly.

+

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

+

+

Hover the field to see the tooltip.

-

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

-
- - diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index 56003ab5a..e0db0575d 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -1,64 +1,102 @@ + jQuery UI Tooltip - Video Player demo - - - - - - - - - - - - - + + + + + + + + + + + + -
-
Here Be Video (HTML5?)
-
- - - - -
- - - -
- - +
Here Be Video (HTML5?)
+
+ + + + +
+ + +
-
+ + +
-

A fake video player with like/share/stats button, each with a custom-styled tooltip.

-
- - -- cgit v1.2.3 From d4f6f17c8de859bcc4b76e15e523fb8b74703afe Mon Sep 17 00:00:00 2001 From: Scott González Date: Sat, 28 May 2011 10:18:39 -0400 Subject: Tooltip: Changed custom animation demo and changed the logic for showing tooltips so custom position options can perform animations. --- demos/tooltip/custom-animation.html | 40 +++++++++++++++++++++---------------- ui/jquery.ui.tooltip.js | 13 ++++++++---- ui/jquery.ui.widget.js | 2 +- 3 files changed, 33 insertions(+), 22 deletions(-) (limited to 'demos') diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index 23fa9aefe..b8f012d91 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -9,25 +9,35 @@ + + - @@ -35,14 +45,10 @@
-

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 tooltips accordingly.

-

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

-

-

Hover the field to see the tooltip.

+

There are various ways to customize the animation of a tooltip.

+

You can use the show and +hide options.

+

You can also use the position option.

diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index b781174c9..c0aaa4fbe 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -90,11 +90,16 @@ $.widget("ui.tooltip", { target.attr( "aria-describedby", tooltip.attr( "id" ) ); } tooltip.find( ".ui-tooltip-content" ).html( content ); - tooltip.position( $.extend({ - of: target - }, this.options.position ) ).hide(); + tooltip + .stop( true ) + .position( $.extend({ + of: target, + using: function( pos ) { + // we only want to hide if there's no custom using defined + $( this ).css( pos ).hide(); + } + }, this.options.position ) ); - tooltip.stop( true ); this._show( tooltip, this.options.show ); this._trigger( "open", event ); diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 4167fd4e5..3bf735cd3 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -379,7 +379,7 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { var hasOptions = !$.isEmptyObject( options ), effectName = options.effect || defaultEffect; options.complete = callback; - if (options.delay) { + if ( options.delay ) { element.delay( options.delay ); } if ( hasOptions && $.effects && ( $.effects.effect[ effectName ] || $.uiBackCompat !== false && $.effects[ effectName ] ) ) { -- cgit v1.2.3 From c2ae4e3fe4be63906dd5da084cfb7fb812421283 Mon Sep 17 00:00:00 2001 From: Scott González Date: Sat, 28 May 2011 17:14:42 -0400 Subject: Tooltip demos: Better tooltip content for custom animations. --- demos/tooltip/custom-animation.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'demos') diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index b8f012d91..e96960f47 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -46,9 +46,9 @@

There are various ways to customize the animation of a tooltip.

-

You can use the show and -hide options.

-

You can also use the position option.

+

You can use the show and +hide options.

+

You can also use the position option.

-- cgit v1.2.3 From a1f9ca724834c7d1e66401f8cea8063346392770 Mon Sep 17 00:00:00 2001 From: Scott González Date: Sun, 29 May 2011 09:13:35 -0400 Subject: Tooltip video player demo: Close tooltip on click of popup button. --- demos/tooltip/video-player.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'demos') diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index e0db0575d..1d8458abb 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -85,9 +85,12 @@ }, text: !!$( this ).attr( "title" ) }); - if ( !button.next().is( ":ui-popup" ) ) { + if ( button.next().is( ":ui-popup" ) ) { + button.click(function( event ) { + $( ".demo" ).tooltip( "close", event ); + }); + } else { button.click(function() { - console.log( "click" ); notify( button ); }); } -- cgit v1.2.3 From 2a92b3ad8eeeb6e82f197fe599929ee334c76f02 Mon Sep 17 00:00:00 2001 From: Scott González Date: Sun, 29 May 2011 12:29:11 -0400 Subject: Tooltip: Change default collision detection to 'flip fit' since the default vertical positioning is centered and can't flip --- demos/tooltip/delegation-mixbag.html | 106 +++++++++++++++++++-------------- tests/unit/tooltip/tooltip_defaults.js | 3 +- ui/jquery.ui.tooltip.js | 3 +- 3 files changed, 66 insertions(+), 46 deletions(-) (limited to 'demos') diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html index 9c524dabe..720071c87 100644 --- a/demos/tooltip/delegation-mixbag.html +++ b/demos/tooltip/delegation-mixbag.html @@ -1,62 +1,80 @@ + jQuery UI Tooltip - Default demo - - - - - - - - + + + + + + + -
- - - - - -
-
This is the footnote, including other elements
-
This is the other footnote, including other elements
+ +
+
+

St. Stephen's Cathedral

+

Vienna, Austria.

+
+ + St. Stephen's Cathedral + +
+ +
+
+

Tower Bridge

+

London, England.

+ + Tower Bridge + +
+ +

All images are part of Wikimedia Commons +and are licensed under CC BY-SA 3.0 by the copyright holder.

+
diff --git a/tests/unit/tooltip/tooltip_defaults.js b/tests/unit/tooltip/tooltip_defaults.js index 13daaeb67..ded3d4558 100644 --- a/tests/unit/tooltip/tooltip_defaults.js +++ b/tests/unit/tooltip/tooltip_defaults.js @@ -5,7 +5,8 @@ commonWidgetTests( "tooltip", { items: "[title]", position: { my: "left+15 center", - at: "right center" + at: "right center", + collision: "flip fit" }, tooltipClass: null, diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 279db69fa..c8d892d38 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -25,7 +25,8 @@ $.widget( "ui.tooltip", { items: "[title]", position: { my: "left+15 center", - at: "right center" + at: "right center", + collision: "flip fit" }, tooltipClass: null }, -- cgit v1.2.3 From 0bc1c8cfdbbae9c80cb60e5d4a16581770e171bd Mon Sep 17 00:00:00 2001 From: Scott González Date: Sun, 29 May 2011 12:31:06 -0400 Subject: Tooltip: New delegation mixbag demo (still needs better name). --- demos/tooltip/delegation-mixbag.html | 6 +----- demos/tooltip/images/st-stephens.jpg | Bin 0 -> 17724 bytes demos/tooltip/images/tower-bridge.jpg | Bin 0 -> 15764 bytes 3 files changed, 1 insertion(+), 5 deletions(-) create mode 100644 demos/tooltip/images/st-stephens.jpg create mode 100644 demos/tooltip/images/tower-bridge.jpg (limited to 'demos') diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html index 720071c87..8de513fcd 100644 --- a/demos/tooltip/delegation-mixbag.html +++ b/demos/tooltip/delegation-mixbag.html @@ -80,12 +80,8 @@ and are licensed under - -

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

- +

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

- - diff --git a/demos/tooltip/images/st-stephens.jpg b/demos/tooltip/images/st-stephens.jpg new file mode 100644 index 000000000..30fc36d67 Binary files /dev/null and b/demos/tooltip/images/st-stephens.jpg differ diff --git a/demos/tooltip/images/tower-bridge.jpg b/demos/tooltip/images/tower-bridge.jpg new file mode 100644 index 000000000..d1e14d6d2 Binary files /dev/null and b/demos/tooltip/images/tower-bridge.jpg differ -- cgit v1.2.3 From 608bc9513f4cdfe5d11cef9ff721085eed2003cc Mon Sep 17 00:00:00 2001 From: Scott González Date: Sun, 29 May 2011 13:50:53 -0400 Subject: Tooltip demo: Small tweaks. --- demos/tooltip/delegation-mixbag.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'demos') diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html index 8de513fcd..8b25aa285 100644 --- a/demos/tooltip/delegation-mixbag.html +++ b/demos/tooltip/delegation-mixbag.html @@ -38,10 +38,10 @@ }); } if ( element.is( "[title]" ) ) { - return $( this ).attr( "title" ); + return element.attr( "title" ); } if ( element.is( "img" ) ) { - return $( this ).attr( "alt" ); + return element.attr( "alt" ); } } }); @@ -58,7 +58,7 @@

Vienna, Austria.

- St. Stephen's Cathedral + St. Stephen's Cathedral @@ -68,7 +68,7 @@

London, England.

- Tower Bridge + Tower Bridge -- cgit v1.2.3 From ade1fe18875dfec29a70072360841c5466663291 Mon Sep 17 00:00:00 2001 From: Scott González Date: Sun, 29 May 2011 17:32:09 -0400 Subject: Tooltip demo: Add note about interactive tooltips. --- demos/tooltip/delegation-mixbag.html | 1 + 1 file changed, 1 insertion(+) (limited to 'demos') diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html index 8b25aa285..951d089f4 100644 --- a/demos/tooltip/delegation-mixbag.html +++ b/demos/tooltip/delegation-mixbag.html @@ -81,6 +81,7 @@ and are licensed under

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

+

We realize you may want to interact with the map tooltips. This is a planned feature for a future version.

-- cgit v1.2.3 From 76586076ecc85fac044c02995c938a46aa1dbab2 Mon Sep 17 00:00:00 2001 From: Scott González Date: Sun, 29 May 2011 20:15:24 -0400 Subject: Tooltip demo: Removing stray periods. --- demos/tooltip/delegation-mixbag.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'demos') diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html index 951d089f4..5b1fa4119 100644 --- a/demos/tooltip/delegation-mixbag.html +++ b/demos/tooltip/delegation-mixbag.html @@ -55,7 +55,7 @@

St. Stephen's Cathedral

-

Vienna, Austria.

+

Vienna, Austria

St. Stephen's Cathedral @@ -65,7 +65,7 @@

Tower Bridge

-

London, England.

+

London, England

Tower Bridge -- cgit v1.2.3