You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
4.5 KiB
120 lines
4.5 KiB
<!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"> |
|
/* since we are loading big images (actually, background-images), need to workaround the mozilla bug */ |
|
var djConfig = {isDebug: true, delayMozLoadingFix: true }; |
|
</script> |
|
|
|
<script type="text/javascript" src="../../dojo.js"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dojo.widget.Tooltip"); |
|
</script> |
|
|
|
<style> |
|
.tt { border-bottom: 1px dotted black; cursor: pointer; } |
|
|
|
/* override tooltip style for this page */ |
|
body .dojoTooltip { color: blue; border: solid 2px blue; padding: 4px; } |
|
|
|
/* and then have some tooltips that look different than the others (just for testing) */ |
|
body .waves { color: red; font-style: italic; background: url(images/2.jpg) top right; border: red 3px dotted;} |
|
body .bridge { color: yellow; background: url(images/1.jpg) bottom right; font-family: cursive; font-size: 14pt; } |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<h1>Tooltip test</h1> |
|
<p>Mouse-over the items below to test tooltips:</p> |
|
<p> |
|
<span id="one" class="tt">text</span> |
|
<span dojoType="tooltip" connectId="one"> |
|
<b> |
|
<span style="color: blue;">rich formatting</span> |
|
<span style="color: red; font-size: x-large;"><i>!</i></span> |
|
</b> |
|
</span> |
|
|
|
<a id="three" href="#bogus">anchor</a> |
|
<span dojoType="tooltip" connectId="three" caption="inline caption w/fade in" toggle="fade"></span> |
|
</p> |
|
|
|
<button id="four">button</button> |
|
<span dojoType="tooltip" connectId="four" caption="tooltip on button" toggle="fade"></span> |
|
|
|
<img id="five" src="images/question.gif"></img> |
|
<span dojoType="tooltip" connectId="five" toggle="explode" toggleDuration="250" class="waves"> |
|
exploding tooltip |
|
</span> |
|
<img id="six" src="images/question.gif"></img> |
|
<span dojoType="tooltip" connectId="six" toggle="explode" toggleDuration="500" class="waves"> |
|
slowly exploding tooltip |
|
</span> |
|
|
|
<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="tooltip" connectId="seven" href="doc0.html" toggle="fade" |
|
executeScripts="true" style="width: 300px;" class="bridge"></span> |
|
|
|
<p></p> |
|
|
|
<form> |
|
<input type="input" id="id1" value="0"/><br> |
|
<input type="input" id="id2" value="1"/><br> |
|
<input type="input" id="id3" value="2"/><br> |
|
|
|
<input type="input" id="id4" value="3"/><br> |
|
<input type="input" id="id5" value="4"/><br> |
|
<input type="input" id="id6" value="5"/><br> |
|
</form> |
|
<br> |
|
|
|
<div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;"> |
|
<span id="s1">text</span><br><br><br> |
|
<span id="s2">text</span><br><br><br> |
|
<span id="s3">text</span><br><br><br> |
|
<span id="s4">text</span><br><br><br> |
|
<span id="s5">text</span><br><br><br> |
|
</div> |
|
|
|
<span dojoType="tooltip" connectId="id1" delay="100" toggle="explode">some text 1</span> |
|
<span dojoType="tooltip" connectId="id2" delay="100" toggle="explode">some text 2</span> |
|
<span dojoType="tooltip" connectId="id3" delay="100" toggle="explode">some text 3</span> |
|
<span dojoType="tooltip" connectId="id4" delay="100" toggle="explode">some text 4</span> |
|
<span dojoType="tooltip" connectId="id5" delay="100" toggle="explode">some text 5</span> |
|
<span dojoType="tooltip" connectId="id6" toggle="explode">some text </span> |
|
|
|
<span dojoType="tooltip" connectId="s1" delay="100" toggle="explode">some text 6</span> |
|
<span dojoType="tooltip" connectId="s2" delay="100" toggle="explode">some text 7</span> |
|
<span dojoType="tooltip" connectId="s3" delay="100" toggle="explode">some text 8</span> |
|
<span dojoType="tooltip" connectId="s4" delay="100" toggle="explode">some text 9</span> |
|
<span dojoType="tooltip" connectId="s5" delay="100" toggle="explode">some text 10</span> |
|
|
|
<div style="position: absolute; bottom: 0"> |
|
Test tooltips on stuff on bottom of screen. Should appear above the element. |
|
<span id="b1" class="tt">text</span> |
|
<span dojoType="tooltip" connectId="b1"> |
|
<b> |
|
<span style="color: blue;">rich formatting</span> |
|
<span style="color: red; font-size: x-large;"><i>!</i></span> |
|
</b> |
|
</span> |
|
<select id="b2"> |
|
<option value="alpha">Alpha</option> |
|
<option value="beta">Beta</option> |
|
<option value="gamma">Gamma</option> |
|
<option value="delta">Delta</option> |
|
</select> |
|
<span dojoType="tooltip" connectId="b2" href="doc0.html" executeScripts="true" style="width: 300px;"></span> |
|
</div> |
|
|
|
</body> |
|
</html> |
|
|
|
|