git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/test_Tooltip.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Dojo Tooltip Widget Test</title>
   6
   7         <style type="text/css">
   8                 @import "../../dojo/resources/dojo.css";
   9                 @import "css/dijitTests.css";
  10         </style>
  11
  12         <script type="text/javascript" src="../../dojo/dojo.js"
  13                 djConfig="parseOnLoad: true, isDebug: true"></script>
  14         <script type="text/javascript" src="_testCommon.js"></script>
  15
  16         <script type="text/javascript">
  17                 dojo.require("dijit.Tooltip");
  18                 dojo.require("dojo.parser");    // find widgets
  19                 dojo.addOnLoad(function(){
  20                         console.log("on load func");
  21                         var tt = new dijit.Tooltip({label:"programmatically created tooltip", connectId:["programmaticTest"]});
  22                         console.log("created", tt, tt.id);
  23                 });
  24         </script>
  25 </head>
  26 <body>
  27         <h1 class="testTitle">Tooltip test</h1>
  28         <p>Mouse-over or focus the items below to test tooltips.</p>
  29         <p>
  30         Change tooltip positioning search list:
  31         <button onclick="dijit.Tooltip.defaultPosition=['above', 'below'];">above, below</button>
  32         <button onclick="dijit.Tooltip.defaultPosition=['after', 'before'];">after, before (default)</button>
  33         </p>
  34         <div><span id="one" class="tt" tabindex="0"> focusable text </span>
  35                 <span dojoType="dijit.Tooltip" connectId="one">
  36                         <b>
  37                                 <span style="color: blue;">rich formatting</span>
  38                                 <span style="color: red; font-size: x-large;"><i>!</i></span>
  39                         </b>
  40                 </span>
  41         </div>
  42         <span id="oneA" class="tt"> plain text (not focusable) </span>
  43         <span dojoType="dijit.Tooltip" connectId="oneA">
  44                 <span> keyboard users can not access this tooltip</span>
  45         </span>
  46     <a id="three" href="#bogus">anchor</a>
  47         <span dojoType="dijit.Tooltip" connectId="three">tooltip on a link </span>
  48         <p></p>
  49
  50         <span id="programmaticTest">this text has a programmatically created tooltip</span>
  51         <br>
  52
  53         <button id="four">button w/tooltip</button>
  54         <span id="btnTt" dojoType="dijit.Tooltip" connectId="four">tooltip on a button</span>
  55         <button onclick="dijit.byId('btnTt').destroy()">Remove</button> tooltip from "button w/tooltip".
  56
  57         <span style="float: right">
  58                 Test tooltip on right aligned element.  Tooltip should flow to the left --&gt;
  59                 <select id="seven">
  60                         <option value="alpha">Alpha</option>
  61                         <option value="beta">Beta</option>
  62                         <option value="gamma">Gamma</option>
  63                         <option value="delta">Delta</option>
  64                 </select>
  65
  66                 <span dojoType="dijit.Tooltip" connectId="seven">
  67                         tooltip on a select<br>
  68                         two line tooltip.
  69                 </span>
  70         </span>
  71
  72         <p></p>
  73
  74         <form>
  75                 <input type="input" id="id1" value="#1"><br>
  76                 <input type="input" id="id2" value="#2"><br>
  77                 <input type="input" id="id3" value="#3"><br>
  78                 <input type="input" id="id4" value="#4"><br>
  79                 <input type="input" id="id5" value="#5"><br>
  80                 <input type="input" id="id6" value="#6"><br>
  81         </form>
  82         <br>
  83
  84         <div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;">
  85                 <span id="s1">s1 text</span><br><br><br>
  86                 <span id="s2">s2 text</span><br><br><br>
  87                 <span id="s3">s3 text</span><br><br><br>
  88                 <span id="s4">s4 text</span><br><br><br>
  89                 <span id="s5">s5 text</span><br><br><br>
  90         </div>
  91
  92         <span dojoType="dijit.Tooltip" connectId="id1">
  93
  94         tooltip for #1<br>
  95         long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;text<br>
  96         make sure that this works properly with a really narrow window
  97         </span>
  98
  99         <span dojoType="dijit.Tooltip" connectId="id2">tooltip for #2</span>
 100         <span dojoType="dijit.Tooltip" connectId="id3">tooltip for #3</span>
 101         <span dojoType="dijit.Tooltip" connectId="id4">tooltip for #4</span>
 102         <span dojoType="dijit.Tooltip" connectId="id5">tooltip for #5</span>
 103         <span dojoType="dijit.Tooltip" connectId="id6">tooltip for #6</span>
 104
 105         <span dojoType="dijit.Tooltip" connectId="s1">s1 tooltip</span>
 106         <span dojoType="dijit.Tooltip" connectId="s2">s2 tooltip</span>
 107         <span dojoType="dijit.Tooltip" connectId="s3">s3 tooltip</span>
 108         <span dojoType="dijit.Tooltip" connectId="s4">s4 tooltip</span>
 109         <span dojoType="dijit.Tooltip" connectId="s5">s5 tooltip</span>
 110
 111         <h3>One Tooltip for multiple connect nodes</h3>
 112         <span dojoType="dijit.Tooltip" connectId="multi1,multi2" style="display:none;">multi tooltip</span>
 113         <a id="multi1" href="#bogus">multi1</a><br><a id="multi2" href="#bogus">multi2</a>
 114
 115 </body>
 116 </html>
 117