<!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>