Blame | Last modification | View Log | RSS feed
<!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><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 widgetsdojo.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><style type="text/css">@import "../../dojo/resources/dojo.css";@import "css/dijitTests.css";</style></head><body><h1 class="testTitle">Tooltip test</h1><p>Mouse-over or focus the items below to test tooltips. <button onclick="dijit.byId('btnTt').destroy()">Remove</button> tooltip from button.</p><p></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</button><span id="btnTt" dojoType="dijit.Tooltip" connectId="four">tooltip on a button</span><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>