diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2011-05-29 12:29:11 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2011-05-29 12:29:11 -0400 |
| commit | 2a92b3ad8eeeb6e82f197fe599929ee334c76f02 (patch) | |
| tree | 93ba9a3c8cb3e2f4cc66e191d4918e188c90cab5 /demos/tooltip | |
| parent | a1f9ca724834c7d1e66401f8cea8063346392770 (diff) | |
| download | jquery-ui-2a92b3ad8eeeb6e82f197fe599929ee334c76f02.tar.gz jquery-ui-2a92b3ad8eeeb6e82f197fe599929ee334c76f02.zip | |
Tooltip: Change default collision detection to 'flip fit' since the default vertical positioning is centered and can't flip
Diffstat (limited to 'demos/tooltip')
| -rw-r--r-- | demos/tooltip/delegation-mixbag.html | 106 |
1 files changed, 62 insertions, 44 deletions
diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html index 9c524dabe..720071c87 100644 --- a/demos/tooltip/delegation-mixbag.html +++ b/demos/tooltip/delegation-mixbag.html @@ -1,62 +1,80 @@ <!doctype html> <html lang="en"> <head> + <meta charset="utf-8"> <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.5.1.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"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.5.1.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.tooltip.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .photo { + width: 300px; + text-align: center; + } + .photo .ui-widget-header { + margin: 1em 0; + } + </style> + <script> $(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..."; + $( ".demo" ).tooltip({ + items: "img, [data-geo], [title]", + content: function() { + var element = $( this ); + if ( element.is( "[data-geo]" ) ) { + return $( "<iframe>", { + width: 425, + height: 350, + frameborder: 0, + scrolling: "no", + marginheight: 0, + marginwidth: 0, + src: "http://maps.google.com/maps?ll=" + element.attr( "data-geo" ) + + "&z=11&t=p&output=embed" + }); + } + if ( element.is( "[title]" ) ) { + return $( this ).attr( "title" ); + } + if ( element.is( "img" ) ) { + return $( this ).attr( "alt" ); } - 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 class="ui-widget photo"> + <div class="ui-widget-header ui-corner-all"> + <h2>St. Stephen's Cathedral</h2> + <h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="48.208174,16.373819">Vienna, Austria</a>.</h3> + </div> + <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG"> + <img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral"> + </a> +</div> + +<div class="ui-widget photo"> + <div class="ui-widget-header ui-corner-all"> + <h2>Tower Bridge</h2> + <h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo="51.500152,-0.126236">London, England</a>.</h3> </div> + <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg"> + <img src="images/tower-bridge.jpg" alt="Tower Bridge"> + </a> +</div> + +<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> +and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p> + </div><!-- End demo --> |