Skip to content
Permalink
Browse files

Popup: Added tooltip style demo and link to demos index

  • Loading branch information
kborchers committed Oct 7, 2011
1 parent 8d09f75 commit bbcbd6899acd600906da0e0fa9e53c7623db5308
Showing with 67 additions and 0 deletions.
  1. +1 −0 demos/popup/index.html
  2. +66 −0 demos/popup/tooltip.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>
@@ -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>

0 comments on commit bbcbd68

Please sign in to comment.
You can’t perform that action at this time.