diff options
Diffstat (limited to 'includes/js/dijit/tests/test_Tooltip.html')
| -rw-r--r-- | includes/js/dijit/tests/test_Tooltip.html | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/test_Tooltip.html b/includes/js/dijit/tests/test_Tooltip.html new file mode 100644 index 0000000..56553b6 --- /dev/null +++ b/includes/js/dijit/tests/test_Tooltip.html @@ -0,0 +1,117 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo Tooltip Widget Test</title> + + <style type="text/css"> + @import "../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript" src="_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Tooltip"); + dojo.require("dojo.parser"); // find widgets + dojo.addOnLoad(function(){ + console.log("on load func"); + var tt = new dijit.Tooltip({label:"programmatically created tooltip", connectId:["programmaticTest"]}); + console.log("created", tt, tt.id); + }); + </script> +</head> +<body> + <h1 class="testTitle">Tooltip test</h1> + <p>Mouse-over or focus the items below to test tooltips.</p> + <p> + Change tooltip positioning search list: + <button onclick="dijit.Tooltip.defaultPosition=['above', 'below'];">above, below</button> + <button onclick="dijit.Tooltip.defaultPosition=['after', 'before'];">after, before (default)</button> + </p> + <div><span id="one" class="tt" tabindex="0"> focusable text </span> + <span dojoType="dijit.Tooltip" connectId="one"> + <b> + <span style="color: blue;">rich formatting</span> + <span style="color: red; font-size: x-large;"><i>!</i></span> + </b> + </span> + </div> + <span id="oneA" class="tt"> plain text (not focusable) </span> + <span dojoType="dijit.Tooltip" connectId="oneA"> + <span> keyboard users can not access this tooltip</span> + </span> + <a id="three" href="#bogus">anchor</a> + <span dojoType="dijit.Tooltip" connectId="three">tooltip on a link </span> + <p></p> + + <span id="programmaticTest">this text has a programmatically created tooltip</span> + <br> + + <button id="four">button w/tooltip</button> + <span id="btnTt" dojoType="dijit.Tooltip" connectId="four">tooltip on a button</span> + <button onclick="dijit.byId('btnTt').destroy()">Remove</button> tooltip from "button w/tooltip". + + <span style="float: right"> + Test tooltip on right aligned element. Tooltip should flow to the left --> + <select id="seven"> + <option value="alpha">Alpha</option> + <option value="beta">Beta</option> + <option value="gamma">Gamma</option> + <option value="delta">Delta</option> + </select> + + <span dojoType="dijit.Tooltip" connectId="seven"> + tooltip on a select<br> + two line tooltip. + </span> + </span> + + <p></p> + + <form> + <input type="input" id="id1" value="#1"><br> + <input type="input" id="id2" value="#2"><br> + <input type="input" id="id3" value="#3"><br> + <input type="input" id="id4" value="#4"><br> + <input type="input" id="id5" value="#5"><br> + <input type="input" id="id6" value="#6"><br> + </form> + <br> + + <div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;"> + <span id="s1">s1 text</span><br><br><br> + <span id="s2">s2 text</span><br><br><br> + <span id="s3">s3 text</span><br><br><br> + <span id="s4">s4 text</span><br><br><br> + <span id="s5">s5 text</span><br><br><br> + </div> + + <span dojoType="dijit.Tooltip" connectId="id1"> + + tooltip for #1<br> + long long long long long long long long long long long text<br> + make sure that this works properly with a really narrow window + </span> + + <span dojoType="dijit.Tooltip" connectId="id2">tooltip for #2</span> + <span dojoType="dijit.Tooltip" connectId="id3">tooltip for #3</span> + <span dojoType="dijit.Tooltip" connectId="id4">tooltip for #4</span> + <span dojoType="dijit.Tooltip" connectId="id5">tooltip for #5</span> + <span dojoType="dijit.Tooltip" connectId="id6">tooltip for #6</span> + + <span dojoType="dijit.Tooltip" connectId="s1">s1 tooltip</span> + <span dojoType="dijit.Tooltip" connectId="s2">s2 tooltip</span> + <span dojoType="dijit.Tooltip" connectId="s3">s3 tooltip</span> + <span dojoType="dijit.Tooltip" connectId="s4">s4 tooltip</span> + <span dojoType="dijit.Tooltip" connectId="s5">s5 tooltip</span> + + <h3>One Tooltip for multiple connect nodes</h3> + <span dojoType="dijit.Tooltip" connectId="multi1,multi2" style="display:none;">multi tooltip</span> + <a id="multi1" href="#bogus">multi1</a><br><a id="multi2" href="#bogus">multi2</a> + +</body> +</html> + |