jQuery UI Tooltip - Custom animation demo

Date: Sat, 28 May 2011 00:52:13 +0000 (-0400) Subject: Tooltip demos: Cleanup. X-Git-Tag: 1.9m6~111^2~29 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c34a814a4b140a0b6a7610874d7918eb3a1e01a3;p=jquery-ui.git Tooltip demos: Cleanup. --- 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.

- -