jQuery UI Tooltip - Custom animation demo

Date: Fri, 27 May 2011 20:52:13 -0400 Subject: [PATCH] Tooltip demos: Cleanup. --- demos/tooltip/custom-animation.html | 49 ++++--- demos/tooltip/default.html | 47 ++++--- demos/tooltip/forms.html | 110 +++++++++------- demos/tooltip/index.html | 3 +- demos/tooltip/tracking.html | 64 +++++----- demos/tooltip/video-player.html | 190 +++++++++++++++------------- 6 files changed, 248 insertions(+), 215 deletions(-) diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index ef8857979..23fa9aefe 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -1,17 +1,24 @@ + jQuery UI Tooltip - Custom animation 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.

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.

Your age:

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.

Your age:

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.

Your age:

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.

Your age:

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.

Your age:

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.

- - -- 2.39.5