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.
271 lines
11 KiB
271 lines
11 KiB
<!DOCTYPE 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>
|
|
|