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.
121 lines
4.5 KiB
121 lines
4.5 KiB
2 years ago
|
<!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>
|
||
|
|
|