diff options
| author | Felix Nagel <info@felixnagel.com> | 2011-10-09 00:14:03 +0200 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2011-10-09 00:14:03 +0200 |
| commit | ac54556fb3b7ab08744cc7ea663a276d5c91cdd4 (patch) | |
| tree | 22fddadf4753d0e2bce4fc9528b9e1cc7cb342d8 /demos | |
| parent | d7e23ce225b6fe08cfa779df0f7e70e4d95a0883 (diff) | |
| parent | 647bab506e288658c8a28dab1083c657ad61951e (diff) | |
| download | jquery-ui-ac54556fb3b7ab08744cc7ea663a276d5c91cdd4.tar.gz jquery-ui-ac54556fb3b7ab08744cc7ea663a276d5c91cdd4.zip | |
Merge branch 'master' of github.com:jquery/jquery-ui into selectmenu
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/popup/index.html | 1 | ||||
| -rw-r--r-- | demos/popup/tooltip.html | 66 | ||||
| -rw-r--r-- | demos/tooltip/tracking.html | 14 |
3 files changed, 75 insertions, 6 deletions
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> diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html index 914940086..222330838 100644 --- a/demos/tooltip/tracking.html +++ b/demos/tooltip/tracking.html @@ -19,14 +19,16 @@ <script> $(function() { $( ".demo" ).tooltip({ + position: { + my: "left+25 center", + at: "center" + }, open: function( event ) { - var tooltip = $( ".ui-tooltip" ); + var tooltip = $( ".ui-tooltip" ), + positionOption = $( this ).tooltip( "option", "position" ); function position( event ) { - tooltip.position({ - my: "left+25 center", - at: "right+25 center", - of: event - }); + positionOption.of = event; + tooltip.position( positionOption ); } $( document ).bind( "mousemove.tooltip-position", position ); // trigger once to override element-relative positioning |