diff options
Diffstat (limited to 'demos/tooltip/delegation-mixbag.html')
| -rw-r--r-- | demos/tooltip/delegation-mixbag.html | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html new file mode 100644 index 000000000..45548433d --- /dev/null +++ b/demos/tooltip/delegation-mixbag.html @@ -0,0 +1,73 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Tooltip - Default demo</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $(".demo").tooltip({ + items: "[href], [title]", + content: function(response) { + var href = $(this).attr("href"); + if (/^#/.test(href)) { + return $(href).html(); + } else if (href) { + $.get(href, response); + return "loading..."; + } + return this.title; + } + }); + $("#footnotes").hide(); + }); + </script> + <style> + label { display: inline-block; width: 5em; } + </style> +</head> +<body> + +<div class="demo"> + <ul> + <li> + <a href="#footnote1">I'm a link to a footnote.</a> + </li> + <li> + <a href="#footnote2">I'm another link to a footnote.</a> + </li> + </ul> + <input title="This is just an input, nothing special" /> + + <ul> + <li> + <a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a> + </li> + <li> + <a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a> + </li> + </ul> + + <div id="footnotes"> + <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> + <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> + </div> +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> |