From bbcbd6899acd600906da0e0fa9e53c7623db5308 Mon Sep 17 00:00:00 2001
From: kborchers <kris.borchers@gmail.com>
Date: Thu, 6 Oct 2011 22:58:19 -0500
Subject: [PATCH] Popup: Added tooltip style demo and link to demos index

---
 demos/popup/index.html   |  1 +
 demos/popup/tooltip.html | 66 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 demos/popup/tooltip.html
diff --git a/demos/popup/index.html b/demos/popup/index.html
index 961585268..63636241b 100644
--- a/demos/popup/index.html
+++ b/demos/popup/index.html
@@ -10,6 +10,7 @@
 		<h4>Examples</h4>
 		<ul>
 			<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+			<li><a href="tooltip.html">Popup on hover (tooltip)</a></li>
 			<li><a href="animation.html">Popup - show/hide effects</a></li>
 			<li><a href="popup-menu.html">Menu's as popup</a></li>
 			<li><a href="popup-menu-table.html">Menu's as popup in a table</a></li>
diff --git a/demos/popup/tooltip.html b/demos/popup/tooltip.html
new file mode 100644
index 000000000..40715d874
--- /dev/null
+++ b/demos/popup/tooltip.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>jQuery UI Popup - Tooltip style demo</title>
+	<link rel="stylesheet" href="../demos.css" />
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
+	<script src="../../jquery-1.6.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>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.popup.js"></script>
+	<script>
+	$(function() {
+		$("#more-info").popup({
+			position: {
+				of: "#info-link"
+			}
+		});
+
+		$( "#info-link" ).hover(
+			function( event ) {
+				$("#more-info").popup( "open" );
+			},
+			function( event ) {
+				$("#more-info").popup( "close" );
+			}
+		);
+	});
+	</script>
+	<style type="text/css">
+		.ui-icon {
+			display: inline-block;
+		}
+		#more-info {
+			width: 11em; 
+			border: 1px solid gray; 
+			border-radius: 5px;
+			padding: 1em;
+			box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
+			background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
+			font-size: 1.3em; outline: none;
+			position: absolute;
+			z-index: 5000;
+			display: none;
+		}
+ 	</style>
+</head>
+<body>
+
+<div class="demo">
+	<div>
+		<textarea>More info about me to the right -></textarea> <span id="info-link" class="ui-icon ui-icon-info" />
+	</div>
+	<div id="more-info">This is some more info</div>
+</div>
+
+<div class="demo-description">
+
+<p>A "more info" popup that works on mouseover (tooltip).</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
