234 lines
10 KiB
HTML
234 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Dojo Tooltip Widget Test</title>
|
|
|
|
<style type="text/css">
|
|
@import "../themes/claro/document.css";
|
|
@import "css/dijitTests.css";
|
|
|
|
td { padding: 20px; }
|
|
</style>
|
|
|
|
<!-- required: a default dijit theme: -->
|
|
<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script type="text/javascript" src="../../dojo/dojo.js"
|
|
data-dojo-config="parseOnLoad: true, isDebug: true"></script>
|
|
|
|
<!-- not needed, for testing alternate themes -->
|
|
<script type="text/javascript" src="_testCommon.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
dojo.require("dojo.parser");
|
|
|
|
dojo.require("dijit.Tooltip");
|
|
dojo.require("dijit.ColorPalette");
|
|
dojo.require("dijit.form.DateTextBox");
|
|
|
|
dojo.require("dijit.form.DropDownButton");
|
|
dojo.require("dijit.DropDownMenu");
|
|
dojo.require("dijit.MenuItem");
|
|
dojo.require("dijit.TitlePane");
|
|
|
|
dojo.ready(function(){
|
|
console.log("on load func");
|
|
var tt = new dijit.Tooltip({label:"programmatically created tooltip", connectId:["programmaticTest"]});
|
|
console.log("created", tt, tt.id);
|
|
|
|
dojo.connect(dijit.byId("t_tooltip"),"onShow",function(t, p){
|
|
console.log("Dynamic target tooltip onShow", t, p);//To check correct order in event call
|
|
if(!p || !p.length){ p = dijit.Tooltip.defaultPosition; }
|
|
dojo.byId("t_shown").innerHTML = "Tooltip shown for node " + t.id + " at position " + p;
|
|
});
|
|
dojo.connect(dijit.byId("t_tooltip"),"onHide",function(){
|
|
console.log("Dynamic target tooltip onHide");//To check correct order in event call
|
|
dojo.byId("t_shown").innerHTML = "Tooltip hidden";
|
|
});
|
|
updateDynamicIds();
|
|
});
|
|
|
|
function updateDynamicIds(){
|
|
dojo.byId("t_connected_id").innerHTML = "Tooltip connected with nodes: " + dijit.byId("t_tooltip").get("connectId");
|
|
}
|
|
function addDynamicTarget(id){
|
|
dijit.byId("t_tooltip").addTarget(id);
|
|
updateDynamicIds();
|
|
}
|
|
function removeDynamicTarget(id){
|
|
dijit.byId("t_tooltip").removeTarget(id);
|
|
updateDynamicIds();
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
|
|
<h1 class="testTitle">Tooltip test</h1>
|
|
|
|
<p>Mouse-over or focus the items below to test tooltips.</p>
|
|
<table>
|
|
<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="dijit.Tooltip.defaultPosition=['above-centered', 'below-centered']; dojo.byId('current').innerHTML='Current: ' + dijit.Tooltip.defaultPosition;">above, below</button>
|
|
<button onclick="dijit.Tooltip.defaultPosition=['after', 'before']; dojo.byId('current').innerHTML='Current: ' + dijit.Tooltip.defaultPosition;">after, before (default)</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" 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"/>
|
|
<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="dijit.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">
|
|
<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"/><br>
|
|
<input id="id2" value="#2"/><br>
|
|
<input id="id3" value="#3"/><br>
|
|
<input id="id4" value="#4"/><br>
|
|
<input id="id5" value="#5"/><br>
|
|
<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 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>
|
|
</body>
|
|
</html>
|