third-party/jquery-ui-1.10.2/tests/visual/tooltip/tooltip.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Tooltip Visual Test: Default</title>
   6         <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
   7         <script src="../../../jquery-1.9.1.js"></script>
   8         <script src="../../../ui/jquery.ui.core.js"></script>
   9         <script src="../../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../../ui/jquery.ui.position.js"></script>
  11         <script src="../../../ui/jquery.ui.button.js"></script>
  12         <script src="../../../ui/jquery.ui.tooltip.js"></script>
  13         <style>
  14         .group {
  15                 margin-top: 2em;
  16         }
  17         </style>
  18         <script>
  19         $(function() {
  20                 // default
  21                 $( "#context1, form, #childish, #nested-input" ).tooltip();
  22
  23                 // custom class, replaces ui-widget-content
  24                 $( "#context2" ).tooltip({
  25                         tooltipClass: "ui-widget-header"
  26                 });
  27                 $( "#right1" ).tooltip({
  28                         tooltipClass: "ui-state-error"
  29                 });
  30
  31                 // synchronous content
  32                 $( "#footnotes" ).tooltip({
  33                         items: "[href^='#']",
  34                         content: function() {
  35                                 return $( $( this ).attr( "href" ) ).html();
  36                         }
  37                 });
  38
  39                 // asynchronous content
  40                 $( "#async" ).tooltip({
  41                         content: function( response ) {
  42                                 setTimeout(function() {
  43                                         response( "I loaded <strong>asynchronously</strong>!" );
  44                                 }, 1000 );
  45                                 return "Loading...";
  46                         }
  47                 });
  48
  49                 // asynchronous content with caching
  50                 var content;
  51                 $( "#async2" ).tooltip({
  52                         content: function( response ) {
  53                                 if ( content ) {
  54                                         return content;
  55                                 }
  56                                 setTimeout(function() {
  57                                         content = "<strong>Hello</strong> world!";
  58                                         response( content );
  59                                 }, 1000 );
  60                                 return "Loading...";
  61                         }
  62                 });
  63
  64                 // custom position
  65                 $( "#right2" ).tooltip({
  66                         tooltipClass: "ui-state-highlight",
  67                         position: {
  68                                 my: "center top",
  69                                 at: "center bottom+10"
  70                         }
  71                 });
  72
  73                 $( "#button1" ).button();
  74                 $( "#button2" ).button({
  75                         icons: {
  76                                 primary: "ui-icon-wrench"
  77                         }
  78                 });
  79                 $( "#button3, #button4" ).button({
  80                         icons: {
  81                                 primary: "ui-icon-wrench"
  82                         },
  83                         text: false
  84                 });
  85                 $( "#buttons" ).tooltip({
  86                         position: {
  87                                 my: "center bottom",
  88                                 at: "center top-5"
  89                         }
  90                 });
  91
  92                 $( "#blurs-on-click" ).tooltip({
  93                         track: true,
  94                         show: {
  95                                 delay: 500
  96                         }
  97                 }).click(function() {
  98                         $( "#focus-on-me" ).focus();
  99                 });
 100         });
 101         </script>
 102 </head>
 103 <body>
 104
 105 <div>
 106         <p>Lots of tooltipped elements close together.<br>
 107                 Mouse through them quickly and slowly.</p>
 108         <ul id="context1">
 109                 <li><a href="#" title="Tooltip text 1">Anchor 1</a></li>
 110                 <li><a href="#" title="Tooltip text 2">Anchor 2</a></li>
 111                 <li><a href="#" title="Tooltip text 3">Anchor 3</a></li>
 112                 <li><a href="#" title="Tooltip text 4 more Tooltip text Tooltip text ">Anchor 4</a></li>
 113                 <li><a href="#" title="Tooltip text 5 more Tooltip text Tooltip text ">Anchor 5</a></li>
 114                 <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li>
 115         </ul>
 116
 117         <div class="group" style="position: absolute; right: 1em; text-align: right;">
 118                 <p>These elements are right aligned.<br>
 119                         One collides and one uses custom position.</p>
 120                 <p id="right1" title="right aligned element">
 121                         collision detection should kick in around here
 122                 </p>
 123                 <p id="right2" title="right aligned element with custom position">
 124                         right aligned with custom position
 125                 </p>
 126         </div>
 127
 128         <div class="group">
 129                 <p>These footnotes pull content form the elements they link to.</p>
 130                 <div id="footnotes">
 131                         <a href="#footnote1">I'm a link to a footnote.</a>
 132                         <a href="#footnote2">I'm another link to a footnote.</a>
 133                 </div>
 134         </div>
 135
 136         <div class="group">
 137                 <p>These elements load their content asynchronously.<br>
 138                         There should be a loading message while the content is retrieved.</p>
 139                 <div id="async" style="width: 100px;" class="ui-widget-content" title="never be seen">
 140                         async
 141                 </div>
 142                 <div id="async2" style="width: 100px;" class="ui-widget-content" title="never be seen">
 143                         async + cache
 144                 </div>
 145         </div>
 146
 147         <div class="group" style="width: 300px;">
 148                 <p>Nested elements.</p>
 149                 <div id="context2">
 150                         <div title="nested parent" style="border:1px solid red;">
 151                                 tooltipped
 152                                 <span title="nested child" style="border:1px solid green; padding-left: 25px;">
 153                                         nested tooltipped
 154                                         <span title="nested nested child" style="border:1px solid blue; padding-left: 25px;">third level</span>
 155                                 </span>
 156                         </div>
 157                         <input title="nested input title">
 158                 </div>
 159                 <div id="childish" style="border: 1px solid black;" title="element with child elements">
 160                         Text in <strong>bold</strong>.
 161                 </div>
 162         </div>
 163
 164         <button id="blurs-on-click" title="button title text">click me to focus something else</button>
 165         <input id="focus-on-me">
 166
 167         <div class="group">
 168                 <p>Play around with focusing and hovering of form elements.</p>
 169                 <form>
 170                         <div>
 171                                 <label for="first">First Name:</label>
 172                                 <input id="first" title="Your first name is optional">
 173                         </div>
 174                         <div>
 175                                 <label for="last">Last Name:</label>
 176                                 <input id="last" title="Your last name is optional">
 177                         </div>
 178                 </form>
 179
 180                 <p>Some inputs nested inside labels:</p>
 181                 <div id="nested-input">
 182                         <label title="test"><input type="checkbox">This is a test</label>
 183                         <label title="test2"><input type="checkbox">This is a test</label>
 184                         <label><input type="checkbox" title="test3">This is a test</label>
 185                         <label><input type="checkbox" title="test4">This is a test</label>
 186                 </div>
 187
 188                 <p>Some button widgets:</p>
 189                 <div id="buttons">
 190                         <button id="button1" title="Button Tooltip">Button Label</button>
 191                         <button id="button2" title="Icon Button">Button with Icon</button>
 192                         <button id="button3">Icon Only Button 1</button>
 193                         <button id="button4">Icon Only Button 2</button>
 194                 </div>
 195         </div>
 196
 197         <div class="group">
 198                 <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
 199                 <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
 200         </div>
 201 </div>
 202
 203 <div style="height: 2000px"></div>
 204
 205 </body>
 206 </html>