dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
272 lines (238 loc) • 11.6 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dojo Tooltip Widget Test</title>
<script type="text/javascript" src="boilerplate.js"></script>
<style type="text/css">
#instructionTable.td { padding: 20px; }
</style>
<script type="text/javascript">
require([
"dojo/dom",
"dojo/parser",
"dijit/registry",
"dijit/Tooltip",
"dijit/ColorPalette",
"dijit/form/DateTextBox",
"dijit/form/DropDownButton",
"dijit/DropDownMenu",
"dijit/MenuItem",
"dijit/TitlePane",
"dojo/domReady!"
], function(dom, parser, registry, Tooltip){
updateDynamicIds = function(){
dom.byId("t_connected_id").innerHTML = "Tooltip connected with nodes: " + registry.byId("t_tooltip").get("connectId");
};
addDynamicTarget = function(id){
registry.byId("t_tooltip").addTarget(id);
updateDynamicIds();
};
removeDynamicTarget = function(id){
registry.byId("t_tooltip").removeTarget(id);
updateDynamicIds();
};
setDefaultAlign = function(array){
Tooltip.defaultPosition = array;
dom.byId('current').innerHTML = "Current: " + array;
};
console.log("on load func");
var tt = new Tooltip({label:"programmatically created tooltip", connectId:["programmaticTest"]});
console.log("created", tt, tt.id);
parser.parse();
registry.byId("t_tooltip").on("show",function(t, p){
console.log("Dynamic target tooltip onShow", t, p);//To check correct order in event call
if(!p || !p.length){ p = Tooltip.defaultPosition; }
dom.byId("t_shown").innerHTML = "Tooltip shown for node " + t.id + " at position " + p;
});
registry.byId("t_tooltip").on("hide", function(){
console.log("Dynamic target tooltip onHide");//To check correct order in event call
dom.byId("t_shown").innerHTML = "Tooltip hidden";
});
updateDynamicIds();
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">Tooltip test</h1>
<p>Mouse-over or focus the items below to test tooltips.</p>
<table id="instructionTable" role="presentation">
<tr>
<td>
Change tooltip positioning search list:
</td>
<td>
Set background color:
</td>
<td>
Prompt message test (for quirks mode):
</td>
</tr>
<tr>
<td>
<button onclick="setDefaultAlign(['above-centered', 'below-centered']);">above-centered, below-centered</button>
<button onclick="setDefaultAlign(['after-centered', 'before-centered']);">after-centered, before-centered</button>
<button onclick="setDefaultAlign(['above', 'below']);">above, below</button>
<!-- unsupported (and currently broken)
<button onclick="setDefaultAlign(['after', 'before']);">after, before</button>
-->
<div id=current>
Current: default (unchanged)
</div>
</td>
<td>
<div data-dojo-type="dijit/ColorPalette" data-dojo-props='onChange:function(val){ dojo.query("body").style("background", val); }'></div>
</td>
<td>
<input data-dojo-type="dijit/form/DateTextBox" aria-label="label" data-dojo-props='id: "dtb", value: "2010-12-15", promptMessage: "Please Enter a date in dd/MM/yyyy format", style:"width: 8em;"'>
</td>
</tr>
</table>
<label for="ddb">Drop down menu items have tooltips:</label>
<button id="ddb" data-dojo-type="dijit/form/DropDownButton">
<span>DropDown</span>
<span id="ddm" data-dojo-type="dijit/DropDownMenu">
<span id="cut" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
onClick:function(){ console.log("not actually cutting anything, just a test!"); }'>Cut</span>
<span id="copy" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
onClick:function(){ console.log("not actually copying anything, just a test!"); }'>Copy</span>
<span id="paste" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
onClick:function(){ console.log("not actually pasting anything, just a test!"); }'>Paste</span>
</span>
</button>
<span id="cut_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["cut"]'>tooltip for cut</span>
<span id="copy_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["copy"]'>tooltip for copy</span>
<span id="paste_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["paste"]'>tooltip for paste</span>
<div id="tp2" dojoType="dijit.TitlePane" title="Tooltip on span in TitlePane" style="width: 300px;">
<span id="tpTooltipTarget">hover me for tooltip</span>
<span dojoType="dijit.Tooltip" connectId="tpTooltipTarget">tooltip on TitlePane span</span>
</div>
<input value="input, no tooltip" aria-label="label" />
<div>
<span id="one" class="tt" tabindex="0"> focusable text </span>
<span id="one_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='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 id="oneA_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["oneA"]'>
<span> keyboard users can not access this tooltip</span>
</span>
<a id="three" href="#bogus">anchor</a>
<span id="three_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='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" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["four"]'>tooltip on a button</span>
<button id="removeButton" onclick="registry.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" aria-label="label">
<option value="alpha">Alpha</option>
<option value="beta">Beta</option>
<option value="gamma">Gamma</option>
<option value="delta">Delta</option>
</select>
<span id="seven_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["seven"]'>
tooltip on a select<br>
two line tooltip.
</span>
</span>
<p></p>
<form>
<input id="id1" value="#1" aria-label="1" /><br>
<input id="id2" value="#2" aria-label="2"/><br>
<input id="id3" value="#3" aria-label="3"/><br>
<input id="id4" value="#4" aria-label="4"/><br>
<input id="id5" value="#5" aria-label="5"/><br>
<input id="id6" value="#6" aria-label="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 id="id1_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='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 id="id2_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id2"]'>tooltip for #2</span>
<span id="id3_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id3"]'>tooltip for #3</span>
<span id="id4_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id4"]'>tooltip for #4</span>
<span id="id5_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id5"]'>tooltip for #5</span>
<span id="id6_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id6"]'>tooltip for #6</span>
<span id="s1_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s1"]'>s1 tooltip</span>
<span id="s2_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s2"]'>s2 tooltip</span>
<span id="s3_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s3"]'>s3 tooltip</span>
<span id="s4_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s4"]'>s4 tooltip</span>
<span id="s5_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s5"]'>s5 tooltip</span>
<h3>One Tooltip for multiple connect nodes</h3>
<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["multi1","multi2"], id:"multi1,multi2_tooltip", style:"display:none;"'>multi tooltip</span>
<a id="multi1" href="#bogus">multi1</a><br><a id="multi2" href="#bogus">multi2</a>
<h3>One Tooltip for multiple connect nodes w/ dojoType</h3>
<span dojoType="dijit.Tooltip" connectId="oldmulti1, oldmulti2" id="oldmulti1,oldmulti2_tooltip" style="display:none">multi tooltip dojoType</span>
<a id="oldmulti1" href="#bogus">multi1</a><br><a id="oldmulti2" href="#bogus">multi2</a>
<h3>Dynamic target tooltip</h3>
<div>
<button onclick="addDynamicTarget('t1');">Add</button>
<button onclick="removeDynamicTarget('t1');">Remove</button>
<span id="t1" tabIndex="0">t1 text</span><br>
<button onclick="addDynamicTarget('t2');">Add</button>
<button onclick="removeDynamicTarget('t2');">Remove</button>
<span id="t2" tabIndex="0">t2 text</span><br>
<button onclick="addDynamicTarget('t3');">Add</button>
<button onclick="removeDynamicTarget('t3');">Remove</button>
<span id="t3" tabIndex="0">t3 text</span><br>
<button onclick="addDynamicTarget('t4');">Add</button>
<button onclick="removeDynamicTarget('t4');">Remove</button>
<span id="t4" tabIndex="0">t4 text</span><br>
<button onclick="addDynamicTarget('t5');">Add</button>
<button onclick="removeDynamicTarget('t5');">Remove</button>
<span id="t5" tabIndex="0">t5 text</span><br>
</div>
<span id="t_connected_id"></span><br>
<span id="t_shown">Tooltip hidden (initial)</span>
<span id="t_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["t1","t3"]'>Dynamic target tooltip</span>
<h3>Nested div test:</h3>
<div dir="ltr" style="margin: 0px 100px;">
<input id="inputBeforeNested" value="before" aria-label="label">
<div id="nested" style="width: 300px;background-color: yellow">
Mouse over the inner blue div should show the tooltip on this outer yellow div.
<div style="width: 100px; height: 100px; background-color: blue; color: white;">
inner blue div
</div>
Likewise, focusing the input should put the tooltip on the outer yellow div
<br>
<input id="nestedInput" value="focus me" aria-label="label">
</div>
<span id="nested_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:"nested"'>
Tooltip on yellow outer div
</span>
</div>
<h3>Delegation test:</h3>
<p>Tooltip should appear for first three rows of the table, customized per row.</p>
<span id="delegation_tooltip" data-dojo-type="dijit/Tooltip"
data-dojo-props='connectId:"myTable", selector: "tr"'>
<script type="dojo/method" data-dojo-event="getContent" data-dojo-args="node">
var row = node.getAttribute("row");
return row <= 3 ? ("Tooltip for row " + row) : null;
</script>
This text will never appear; instead getContent() will run.
</span>
<table id="myTable">
<tr id="myTable-row1" row=1><td>row</td><td>1</td></tr>
<tr id="myTable-row2" row=2><td>row</td><td>2</td></tr>
<tr id="myTable-row3" row=3><td>row</td><td>3</td></tr>
<tr id="myTable-row4" row=4><td>row</td><td>4</td></tr>
<tr id="myTable-row5" row=5><td>row</td><td>5</td></tr>
</table>
</body>
</html>