8 files changed, 21 insertions, 74 deletions
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html
index 2ed468ba8..7a66daccf 100644
--- a/demos/tooltip/custom-animation.html
+++ b/demos/tooltip/custom-animation.html
@@ -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..31352155d 100644
--- a/demos/tooltip/custom-content.html
+++ b/demos/tooltip/custom-content.html
@@ -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..48afe23c4 100644
--- a/demos/tooltip/custom-style.html
+++ b/demos/tooltip/custom-style.html
@@ -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..f1be3de9e 100644
--- a/demos/tooltip/default.html
+++ b/demos/tooltip/default.html
@@ -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..879a92d7f 100644
--- a/demos/tooltip/forms.html
+++ b/demos/tooltip/forms.html
@@ -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..9b6b5c272 100644
--- a/demos/tooltip/tracking.html
+++ b/demos/tooltip/tracking.html
@@ -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..020e475d1 100644
--- a/demos/tooltip/video-player.html
+++ b/demos/tooltip/video-player.html
@@ -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>