source: Dev/trunk/src/client/dijit/tests/test_Tooltip.html @ 483

Last change on this file since 483 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 11.4 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>Dojo Tooltip Widget Test</title>
6
7        <script type="text/javascript" src="boilerplate.js"></script>
8
9        <style type="text/css">
10                #instructionTable.td { padding: 20px; }
11        </style>
12
13        <script type="text/javascript">
14                require([
15                        "dojo/dom",
16                        "dojo/parser",
17                        "dijit/registry",
18                        "dijit/Tooltip",
19
20                        "dijit/ColorPalette",
21                        "dijit/form/DateTextBox",
22                        "dijit/form/DropDownButton",
23                        "dijit/DropDownMenu",
24                        "dijit/MenuItem",
25                        "dijit/TitlePane",
26                               
27                        "dojo/domReady!"
28                ], function(dom, parser, registry, Tooltip){
29                        updateDynamicIds = function(){
30                                dom.byId("t_connected_id").innerHTML = "Tooltip connected with nodes: " + registry.byId("t_tooltip").get("connectId");
31                        };
32                        addDynamicTarget = function(id){
33                                registry.byId("t_tooltip").addTarget(id);
34                                updateDynamicIds();
35                        };
36                        removeDynamicTarget = function(id){
37                                registry.byId("t_tooltip").removeTarget(id);
38                                updateDynamicIds();
39                        };
40       
41                        setDefaultAlign = function(array){
42                                Tooltip.defaultPosition = array;
43                                dom.byId('current').innerHTML = "Current: " + array;
44                        };
45
46                        console.log("on load func");
47                        var tt = new Tooltip({label:"programmatically created tooltip", connectId:["programmaticTest"]});
48                        console.log("created", tt, tt.id);
49
50                        parser.parse();
51
52                        registry.byId("t_tooltip").on("show",function(t, p){
53                                console.log("Dynamic target tooltip onShow", t, p);//To check correct order in event call
54                                if(!p || !p.length){ p = Tooltip.defaultPosition; }
55                                dom.byId("t_shown").innerHTML = "Tooltip shown for node " + t.id + " at position " + p;
56                        });
57                        registry.byId("t_tooltip").on("hide", function(){
58                                console.log("Dynamic target tooltip onHide");//To check correct order in event call
59                                dom.byId("t_shown").innerHTML = "Tooltip hidden";
60                        });
61                        updateDynamicIds();
62                });
63        </script>
64</head>
65<body class="claro" role="main">
66
67        <h1 class="testTitle">Tooltip test</h1>
68
69        <p>Mouse-over or focus the items below to test tooltips.</p>
70        <table id="instructionTable" role="presentation">
71                <tr>
72                        <td>
73                                Change tooltip positioning search list:
74                        </td>
75                        <td>
76                                Set background color:
77                        </td>
78                        <td>
79                                Prompt message test (for quirks mode):
80                        </td>
81                </tr>
82                <tr>
83                        <td>
84                                <button onclick="setDefaultAlign(['above-centered', 'below-centered']);">above-centered, below-centered</button>
85                                <button onclick="setDefaultAlign(['after-centered', 'before-centered']);">after-centered, before-centered</button>
86                                <button onclick="setDefaultAlign(['above', 'below']);">above, below</button>
87                                <!-- unsupported (and currently broken)
88                                <button onclick="setDefaultAlign(['after', 'before']);">after, before</button>
89                                -->
90                                <div id=current>
91                                        Current: default (unchanged)
92                                </div>
93                        </td>
94                        <td>
95                                <div data-dojo-type="dijit/ColorPalette" data-dojo-props='onChange:function(val){ dojo.query("body").style("background", val); }'></div>
96                        </td>
97                        <td>
98                                <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;"'>
99                        </td>
100                </tr>
101        </table>
102
103        <label for="ddb">Drop down menu items have tooltips:</label>
104        <button id="ddb" data-dojo-type="dijit/form/DropDownButton">
105                <span>DropDown</span>
106                <span id="ddm" data-dojo-type="dijit/DropDownMenu">
107                        <span id="cut" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
108                                onClick:function(){ console.log("not actually cutting anything, just a test!"); }'>Cut</span>
109                        <span id="copy" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
110                                onClick:function(){ console.log("not actually copying anything, just a test!"); }'>Copy</span>
111                        <span id="paste" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
112                                onClick:function(){ console.log("not actually pasting anything, just a test!"); }'>Paste</span>
113                </span>
114        </button>
115        <span id="cut_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["cut"]'>tooltip for cut</span>
116        <span id="copy_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["copy"]'>tooltip for copy</span>
117        <span id="paste_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["paste"]'>tooltip for paste</span>
118
119        <div id="tp2" dojoType="dijit.TitlePane" title="Tooltip on span in TitlePane" style="width: 300px;">
120                <span id="tpTooltipTarget">hover me for tooltip</span>
121                <span dojoType="dijit.Tooltip" connectId="tpTooltipTarget">tooltip on TitlePane span</span>
122        </div>
123
124        <input value="input, no tooltip" aria-label="label" />
125        <div>
126                <span id="one" class="tt" tabindex="0"> focusable text </span>
127                <span id="one_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["one"]'>
128                        <b>
129                                <span style="color: blue;">rich formatting</span>
130                                <span style="color: red; font-size: x-large;"><i>!</i></span>
131                        </b>
132                </span>
133        </div>
134        <span id="oneA" class="tt"> plain text (not focusable) </span>
135        <span id="oneA_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["oneA"]'>
136                <span> keyboard users can not access this tooltip</span>
137        </span>
138    <a id="three" href="#bogus">anchor</a>
139        <span id="three_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["three"]'>tooltip on a link </span>
140        <p></p>
141
142        <span id="programmaticTest">this text has a programmatically created tooltip</span>
143        <br>
144
145        <button id="four">button w/tooltip</button>
146        <span id="btnTt" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["four"]'>tooltip on a button</span>
147        <button id="removeButton" onclick="registry.byId('btnTt').destroy()">Remove</button> tooltip from "button w/tooltip".
148
149        <span style="float: right">
150                Test tooltip on right aligned element.  Tooltip should flow to the left --&gt;
151                <select id="seven" aria-label="label">
152                        <option value="alpha">Alpha</option>
153                        <option value="beta">Beta</option>
154                        <option value="gamma">Gamma</option>
155                        <option value="delta">Delta</option>
156                </select>
157
158                <span id="seven_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["seven"]'>
159                        tooltip on a select<br>
160                        two line tooltip.
161                </span>
162        </span>
163
164        <p></p>
165
166        <form>
167                <input id="id1" value="#1" aria-label="1" /><br>
168                <input id="id2" value="#2" aria-label="2"/><br>
169                <input id="id3" value="#3" aria-label="3"/><br>
170                <input id="id4" value="#4" aria-label="4"/><br>
171                <input id="id5" value="#5" aria-label="5"/><br>
172                <input id="id6" value="#6" aria-label="6"/><br>
173        </form>
174        <br>
175
176        <div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;">
177                <span id="s1">s1 text</span><br><br><br>
178                <span id="s2">s2 text</span><br><br><br>
179                <span id="s3">s3 text</span><br><br><br>
180                <span id="s4">s4 text</span><br><br><br>
181                <span id="s5">s5 text</span><br><br><br>
182        </div>
183
184        <span id="id1_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id1"]'>
185
186        tooltip for #1<br>
187        long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;text<br>
188        make sure that this works properly with a really narrow window
189        </span>
190
191        <span id="id2_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id2"]'>tooltip for #2</span>
192        <span id="id3_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id3"]'>tooltip for #3</span>
193        <span id="id4_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id4"]'>tooltip for #4</span>
194        <span id="id5_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id5"]'>tooltip for #5</span>
195        <span id="id6_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["id6"]'>tooltip for #6</span>
196
197        <span id="s1_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s1"]'>s1 tooltip</span>
198        <span id="s2_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s2"]'>s2 tooltip</span>
199        <span id="s3_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s3"]'>s3 tooltip</span>
200        <span id="s4_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s4"]'>s4 tooltip</span>
201        <span id="s5_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["s5"]'>s5 tooltip</span>
202
203        <h3>One Tooltip for multiple connect nodes</h3>
204        <span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["multi1","multi2"], id:"multi1,multi2_tooltip", style:"display:none;"'>multi tooltip</span>
205        <a id="multi1" href="#bogus">multi1</a><br><a id="multi2" href="#bogus">multi2</a>
206
207        <h3>One Tooltip for multiple connect nodes w/ dojoType</h3>
208        <span dojoType="dijit.Tooltip" connectId="oldmulti1, oldmulti2" id="oldmulti1,oldmulti2_tooltip" style="display:none">multi tooltip dojoType</span>
209        <a id="oldmulti1" href="#bogus">multi1</a><br><a id="oldmulti2" href="#bogus">multi2</a>
210
211
212        <h3>Dynamic target tooltip</h3>
213        <div>
214                <button onclick="addDynamicTarget('t1');">Add</button>
215                <button onclick="removeDynamicTarget('t1');">Remove</button>
216                <span id="t1" tabIndex="0">t1 text</span><br>
217                <button onclick="addDynamicTarget('t2');">Add</button>
218                <button onclick="removeDynamicTarget('t2');">Remove</button>
219                <span id="t2" tabIndex="0">t2 text</span><br>
220                <button onclick="addDynamicTarget('t3');">Add</button>
221                <button onclick="removeDynamicTarget('t3');">Remove</button>
222                <span id="t3" tabIndex="0">t3 text</span><br>
223                <button onclick="addDynamicTarget('t4');">Add</button>
224                <button onclick="removeDynamicTarget('t4');">Remove</button>
225                <span id="t4" tabIndex="0">t4 text</span><br>
226                <button onclick="addDynamicTarget('t5');">Add</button>
227                <button onclick="removeDynamicTarget('t5');">Remove</button>
228                <span id="t5" tabIndex="0">t5 text</span><br>
229        </div>
230        <span id="t_connected_id"></span><br>
231        <span id="t_shown">Tooltip hidden (initial)</span>
232
233        <span id="t_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["t1","t3"]'>Dynamic target tooltip</span>
234
235        <h3>Nested div test:</h3>
236        <div dir="ltr" style="margin: 0px 100px;">
237                <input id="inputBeforeNested" value="before" aria-label="label">
238                <div id="nested" style="width: 300px;background-color: yellow">
239                        Mouse over the inner blue div should show the tooltip on this outer yellow div.
240                        <div style="width: 100px; height: 100px; background-color: blue; color: white;">
241                                inner blue div
242                        </div>
243                        Likewise, focusing the input should put the tooltip on the outer yellow div
244                        <br>
245                        <input id="nestedInput" value="focus me" aria-label="label">
246                </div>
247                <span id="nested_tooltip" data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:"nested"'>
248                        Tooltip on yellow outer div
249                </span>
250        </div>
251
252        <h3>Delegation test:</h3>
253        <p>Tooltip should appear for first three rows of the table, customized per row.</p>
254        <span id="delegation_tooltip" data-dojo-type="dijit/Tooltip"
255                  data-dojo-props='connectId:"myTable", selector: "tr"'>
256                <script type="dojo/method" data-dojo-event="getContent" data-dojo-args="node">
257                        var row = node.getAttribute("row");
258                        return row <= 3 ? ("Tooltip for row " + row) : null;
259                </script>
260                This text will never appear; instead getContent() will run.
261        </span>
262        <table id="myTable">
263                <tr id="myTable-row1" row=1><td>row</td><td>1</td></tr>
264                <tr id="myTable-row2" row=2><td>row</td><td>2</td></tr>
265                <tr id="myTable-row3" row=3><td>row</td><td>3</td></tr>
266                <tr id="myTable-row4" row=4><td>row</td><td>4</td></tr>
267                <tr id="myTable-row5" row=5><td>row</td><td>5</td></tr>
268        </table>
269
270</body>
271</html>
Note: See TracBrowser for help on using the repository browser.