library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Popup: Added tooltip style demo and link to demos index

Browse Source
This commit is contained in:
kborchers 2011-10-06 22:58:19 -05:00
parent 8d09f750a4
commit bbcbd6899a
2 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demos/popup/index.html
View File

@ -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>

66
demos/popup/tooltip.html Normal file
View File

@ -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>