aboutsummaryrefslogtreecommitdiffstats
path: root/demos/tooltip
diff options
context:
space:
mode:
authorFelix Nagel <info@felixnagel.com>2012-10-03 22:37:03 +0200
committerFelix Nagel <info@felixnagel.com>2012-10-03 22:37:03 +0200
commitcca4e77a95eb7024c204f4d0719baa2ef6195ed2 (patch)
tree732a8e171647d9b25b1b2988f09dccc5d182bad7 /demos/tooltip
parent5e12c54be1813e1f627d3214c11d7520fb46c647 (diff)
parente8bdf468614e59309b4a02ad4f6c29c1d06083c1 (diff)
downloadjquery-ui-cca4e77a95eb7024c204f4d0719baa2ef6195ed2.tar.gz
jquery-ui-cca4e77a95eb7024c204f4d0719baa2ef6195ed2.zip
Merge branch 'master' into selectmenu
Diffstat (limited to 'demos/tooltip')
-rw-r--r--demos/tooltip/custom-animation.html11
-rw-r--r--demos/tooltip/custom-content.html13
-rw-r--r--demos/tooltip/custom-style.html13
-rw-r--r--demos/tooltip/default.html13
-rw-r--r--demos/tooltip/forms.html11
-rw-r--r--demos/tooltip/index.html22
-rw-r--r--demos/tooltip/tracking.html13
-rw-r--r--demos/tooltip/video-player.html13
8 files changed, 28 insertions, 81 deletions
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html
index 2ed468ba8..774a9d2a7 100644
--- a/demos/tooltip/custom-animation.html
+++ b/demos/tooltip/custom-animation.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Tooltip - Custom animation demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.8.0.js"></script>
+ <script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
@@ -41,21 +41,14 @@
</head>
<body>
-<div class="demo">
-
<p>There are various ways to customize the animation of a tooltip.</p>
<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and
<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
<p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>This demo shows how to customize animations using the show and hide options,
as well as the open event.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/tooltip/custom-content.html b/demos/tooltip/custom-content.html
index 286e75781..93172524a 100644
--- a/demos/tooltip/custom-content.html
+++ b/demos/tooltip/custom-content.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Tooltip - Custom content</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.8.0.js"></script>
+ <script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
@@ -25,7 +25,7 @@
</style>
<script>
$(function() {
- $( ".demo" ).tooltip({
+ $( document ).tooltip({
items: "img, [data-geo], [title]",
content: function() {
var element = $( this );
@@ -49,8 +49,6 @@
</head>
<body>
-<div class="demo">
-
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>St. Stephen's Cathedral</h2>
@@ -74,14 +72,9 @@
<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
<p>We realize you may want to interact with the map tooltips. This is a planned feature for a future version.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/tooltip/custom-style.html b/demos/tooltip/custom-style.html
index c9035d44b..f18522e54 100644
--- a/demos/tooltip/custom-style.html
+++ b/demos/tooltip/custom-style.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.tooltip.css">
- <script src="../../jquery-1.8.0.js"></script>
+ <script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
@@ -12,7 +12,7 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
- $( ".demo" ).tooltip({
+ $( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
@@ -79,8 +79,6 @@
</head>
<body>
-<div class="demo">
-
<p><a href="#" title="That's what this widget is">Tooltips</a> 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.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
@@ -90,13 +88,8 @@ will also style tooltips accordingly.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html
index a34acd41d..8392e5504 100644
--- a/demos/tooltip/default.html
+++ b/demos/tooltip/default.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.8.0.js"></script>
+ <script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
@@ -12,7 +12,7 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
- $( ".demo" ).tooltip();
+ $( document ).tooltip();
});
</script>
<style>
@@ -24,8 +24,6 @@
</head>
<body>
-<div class="demo">
-
<p><a href="#" title="That's what this widget is">Tooltips</a> 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.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
@@ -35,13 +33,8 @@ will also style tooltips accordingly.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html
index 760fed4d7..da3affa2d 100644
--- a/demos/tooltip/forms.html
+++ b/demos/tooltip/forms.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.8.0.js"></script>
+ <script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
@@ -40,8 +40,6 @@
</head>
<body>
-<div class="demo">
-
<form>
<fieldset>
<div>
@@ -59,14 +57,9 @@
</fieldset>
</form>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p>
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html
index 3753bc181..cebedd0c3 100644
--- a/demos/tooltip/index.html
+++ b/demos/tooltip/index.html
@@ -3,22 +3,18 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip Demos</title>
- <link rel="stylesheet" href="../demos.css">
</head>
<body>
-<div class="demos-nav">
- <h4>Examples</h4>
- <ul>
- <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
- <li><a href="custom-style.html">Custom style with arrow</a></li>
- <li><a href="forms.html">Forms with tooltips</a></li>
- <li><a href="tracking.html">Track the mouse</a></li>
- <li><a href="custom-animation.html">Custom animation</a></li>
- <li><a href="custom-content.html">Custom content</a></li>
- <li><a href="video-player.html">Video Player</a></li>
- </ul>
-</div>
+<ul>
+ <li><a href="default.html">Default functionality</a></li>
+ <li><a href="custom-style.html">Custom style with arrow</a></li>
+ <li><a href="forms.html">Forms with tooltips</a></li>
+ <li><a href="tracking.html">Track the mouse</a></li>
+ <li><a href="custom-animation.html">Custom animation</a></li>
+ <li><a href="custom-content.html">Custom content</a></li>
+ <li><a href="video-player.html">Video Player</a></li>
+</ul>
</body>
</html>
diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html
index 84c40e580..1bb1c773a 100644
--- a/demos/tooltip/tracking.html
+++ b/demos/tooltip/tracking.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Tooltip - Track the mouse</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.8.0.js"></script>
+ <script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
@@ -18,7 +18,7 @@
</style>
<script>
$(function() {
- $( ".demo" ).tooltip({
+ $( document ).tooltip({
track: true
});
});
@@ -26,8 +26,6 @@
</head>
<body>
-<div class="demo">
-
<p><a href="#" title="That's what this widget is">Tooltips</a> 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.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
@@ -37,13 +35,8 @@ will also style tooltips accordingly.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html
index c7f1e525b..8be3c52ef 100644
--- a/demos/tooltip/video-player.html
+++ b/demos/tooltip/video-player.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>jQuery UI Tooltip - Video Player demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.8.0.js"></script>
+ <script src="../../jquery-1.8.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
@@ -79,7 +79,7 @@
items: "button"
});
- $( ".demo" ).tooltip({
+ $( document ).tooltip({
position: {
my: "center top",
at: "center bottom+5",
@@ -96,8 +96,6 @@
</head>
<body>
-<div class="demo">
-
<div class="player">Here Be Video (HTML5?)</div>
<div class="tools">
<span class="set">
@@ -112,13 +110,8 @@
<button data-icon="ui-icon-alert">Flag as inappropiate</button>
</div>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-11 20:42:51 +0000