jQuery UI Tooltip - Custom animation demo

From 3909e6d89e01e4cd8777377c63037896bb95aa2f Mon Sep 17 00:00:00 2001 From: Leif Johansson Date: Fri, 25 Nov 2011 21:18:19 +0100 Subject: new jq layout --- .../demos/tooltip/ajax/content1.html | 1 + .../demos/tooltip/ajax/content2.html | 1 + .../demos/tooltip/custom-animation.html | 61 ++++++++ .../demos/tooltip/custom-content.html | 85 +++++++++++ .../demos/tooltip/custom-style.html | 111 +++++++++++++++ .../jquery-ui-1.9pre/demos/tooltip/default.html | 47 +++++++ .../jquery-ui-1.9pre/demos/tooltip/forms.html | 87 ++++++++++++ .../demos/tooltip/images/st-stephens.jpg | Bin 0 -> 17724 bytes .../demos/tooltip/images/tower-bridge.jpg | Bin 0 -> 15764 bytes .../jquery-ui-1.9pre/demos/tooltip/index.html | 24 ++++ .../jquery-ui-1.9pre/demos/tooltip/tracking.html | 66 +++++++++ .../demos/tooltip/video-player.html | 155 +++++++++++++++++++++ 12 files changed, 638 insertions(+) create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content1.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content2.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-animation.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-content.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/default.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/forms.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/st-stephens.jpg create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/tower-bridge.jpg create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/index.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/tracking.html create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/video-player.html (limited to 'src/main/webapp/jquery-ui-1.9pre/demos/tooltip') diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content1.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content1.html new file mode 100644 index 0000000..a1401b2 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content1.html @@ -0,0 +1 @@ +

This content was loaded via ajax.

\ No newline at end of file diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content2.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content2.html new file mode 100644 index 0000000..f4132d7 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/ajax/content2.html @@ -0,0 +1 @@ +

This other content was loaded via ajax.

\ No newline at end of file diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-animation.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-animation.html new file mode 100644 index 0000000..842256f --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-animation.html @@ -0,0 +1,61 @@ + + + + + jQuery UI Tooltip - Custom animation demo + + + + + + + + + + + + + +

+ +

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

You can use the show and +hide options.

You can also use the open event.

+ +

+ + + +

This demo shows how to customize animations using the show and hide options, +as well as the open event.

+ + + diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-content.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-content.html new file mode 100644 index 0000000..f911c82 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-content.html @@ -0,0 +1,85 @@ + + + + + jQuery UI Tooltip - Custom content + + + + + + + + + + + + +

+ +

St. Stephen's Cathedral

Vienna, Austria

+ +

+ +

Tower Bridge

London, England

+ +

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

+ +

+ + + +

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.

+ + + diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html new file mode 100644 index 0000000..3df94c4 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html @@ -0,0 +1,111 @@ + + + + + jQuery UI Tooltip - Default functionality + + + + + + + + + + + + +

+ +

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/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/default.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/default.html new file mode 100644 index 0000000..f594318 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/default.html @@ -0,0 +1,47 @@ + + + + + jQuery UI Tooltip - Default functionality + + + + + + + + + + + + +

+ +

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/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/forms.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/forms.html new file mode 100644 index 0000000..93297a6 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/forms.html @@ -0,0 +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/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/st-stephens.jpg b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/st-stephens.jpg new file mode 100644 index 0000000..30fc36d Binary files /dev/null and b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/st-stephens.jpg differ diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/tower-bridge.jpg b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/tower-bridge.jpg new file mode 100644 index 0000000..d1e14d6 Binary files /dev/null and b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/images/tower-bridge.jpg differ diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/index.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/index.html new file mode 100644 index 0000000..3753bc1 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/index.html @@ -0,0 +1,24 @@ + + + + + jQuery UI Tooltip Demos + + + + +

Examples

+ + + diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/tracking.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/tracking.html new file mode 100644 index 0000000..f37c15c --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/tracking.html @@ -0,0 +1,66 @@ + + + + + jQuery UI Tooltip - Track the mouse + + + + + + + + + + + + +

+ +

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/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/video-player.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/video-player.html new file mode 100644 index 0000000..365934f --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/video-player.html @@ -0,0 +1,155 @@ + + + + + jQuery UI Tooltip - Video Player demo + + + + + + + + + + + + + + + + + +

+ +

Here Be Video (HTML5?)

+ + + + +

+ + +

+ +

+ + + +

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

+ + + -- cgit v1.1