source: Dev/branches/rest-dojo-ui/client/dijit/tests/test_Tooltip.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 9.8 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>Dojo Tooltip Widget Test</title>
6
7        <style type="text/css">
8                @import "../themes/claro/document.css";
9                @import "css/dijitTests.css";
10
11                td { padding: 20px; }
12        </style>
13
14        <!-- required: a default dijit theme: -->
15        <link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
16
17        <!-- required: dojo.js -->
18        <script type="text/javascript" src="../../dojo/dojo.js"
19                data-dojo-config="parseOnLoad: true, isDebug: true"></script>
20
21        <!-- not needed, for testing alternate themes -->
22        <script type="text/javascript" src="_testCommon.js"></script>
23
24        <script type="text/javascript">
25                dojo.require("dojo.parser");
26
27                dojo.require("dijit.Tooltip");
28                dojo.require("dijit.ColorPalette");
29                dojo.require("dijit.form.DateTextBox");
30
31                dojo.require("dijit.form.DropDownButton");
32                dojo.require("dijit.DropDownMenu");
33                dojo.require("dijit.MenuItem");
34                dojo.require("dijit.TitlePane");
35
36                dojo.ready(function(){
37                        console.log("on load func");
38                        var tt = new dijit.Tooltip({label:"programmatically created tooltip", connectId:["programmaticTest"]});
39                        console.log("created", tt, tt.id);
40
41                        dojo.connect(dijit.byId("t_tooltip"),"onShow",function(t, p){
42                                console.log("Dynamic target tooltip onShow", t, p);//To check correct order in event call
43                                if(!p || !p.length){ p = dijit.Tooltip.defaultPosition; }
44                                dojo.byId("t_shown").innerHTML = "Tooltip shown for node " + t.id + " at position " + p;
45                        });
46                        dojo.connect(dijit.byId("t_tooltip"),"onHide",function(){
47                                console.log("Dynamic target tooltip onHide");//To check correct order in event call
48                                dojo.byId("t_shown").innerHTML = "Tooltip hidden";
49                        });
50                        updateDynamicIds();
51                });
52
53                function updateDynamicIds(){
54                        dojo.byId("t_connected_id").innerHTML = "Tooltip connected with nodes: " + dijit.byId("t_tooltip").get("connectId");
55                }
56                function addDynamicTarget(id){
57                        dijit.byId("t_tooltip").addTarget(id);
58                        updateDynamicIds();
59                }
60                function removeDynamicTarget(id){
61                        dijit.byId("t_tooltip").removeTarget(id);
62                        updateDynamicIds();
63                }
64
65        </script>
66</head>
67<body class="claro">
68
69        <h1 class="testTitle">Tooltip test</h1>
70
71        <p>Mouse-over or focus the items below to test tooltips.</p>
72        <table>
73                <tr>
74                        <td>
75                                Change tooltip positioning search list:
76                        </td>
77                        <td>
78                                Set background color:
79                        </td>
80                        <td>
81                                Prompt message test (for quirks mode):
82                        </td>
83                </tr>
84                <tr>
85                        <td>
86                                <button onclick="dijit.Tooltip.defaultPosition=['above-centered', 'below-centered']; dojo.byId('current').innerHTML='Current: ' + dijit.Tooltip.defaultPosition;">above, below</button>
87                                <button onclick="dijit.Tooltip.defaultPosition=['after', 'before']; dojo.byId('current').innerHTML='Current: ' + dijit.Tooltip.defaultPosition;">after, before (default)</button>
88                                <div id=current>
89                                        Current: default (unchanged)
90                                </div>
91                        </td>
92                        <td>
93                                <div data-dojo-type="dijit.ColorPalette" data-dojo-props='onChange:function(val){ dojo.query("body").style("background", val); }'></div>
94                        </td>
95                        <td>
96                                <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;"'>                               
97                        </td>
98                </tr>
99        </table>
100
101        <label for="ddb">Drop down menu items have tooltips:</label>
102        <button id="ddb" data-dojo-type="dijit.form.DropDownButton">
103                <span>DropDown</span>
104                <span id="ddm" data-dojo-type="dijit.DropDownMenu">
105                        <span id="cut" data-dojo-type="dijit.MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
106                                onClick:function(){ console.log("not actually cutting anything, just a test!"); }'>Cut</span>
107                        <span id="copy" data-dojo-type="dijit.MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
108                                onClick:function(){ console.log("not actually copying anything, just a test!"); }'>Copy</span>
109                        <span id="paste" data-dojo-type="dijit.MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
110                                onClick:function(){ console.log("not actually pasting anything, just a test!"); }'>Paste</span>
111                </span>
112        </button>
113        <span id="cut_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["cut"]'>tooltip for cut</span>
114        <span id="copy_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["copy"]'>tooltip for copy</span>
115        <span id="paste_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["paste"]'>tooltip for paste</span>
116
117        <div id="tp2" dojoType="dijit.TitlePane" title="Tooltip on span in TitlePane" style="width: 300px;">
118                <span id="tpTooltipTarget">hover me for tooltip</span>
119                <span dojoType="dijit.Tooltip" connectId="tpTooltipTarget">tooltip on TitlePane span</span>
120        </div>
121
122        <input value="input, no tooltip"/>
123        <div>
124                <span id="one" class="tt" tabindex="0"> focusable text </span>
125                <span id="one_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["one"]'>
126                        <b>
127                                <span style="color: blue;">rich formatting</span>
128                                <span style="color: red; font-size: x-large;"><i>!</i></span>
129                        </b>
130                </span>
131        </div>
132        <span id="oneA" class="tt"> plain text (not focusable) </span>
133        <span id="oneA_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["oneA"]'>
134                <span> keyboard users can not access this tooltip</span>
135        </span>
136    <a id="three" href="#bogus">anchor</a>
137        <span id="three_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["three"]'>tooltip on a link </span>
138        <p></p>
139
140        <span id="programmaticTest">this text has a programmatically created tooltip</span>
141        <br>
142
143        <button id="four">button w/tooltip</button>
144        <span id="btnTt" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["four"]'>tooltip on a button</span>
145        <button id="removeButton" onclick="dijit.byId('btnTt').destroy()">Remove</button> tooltip from "button w/tooltip".
146
147        <span style="float: right">
148                Test tooltip on right aligned element.  Tooltip should flow to the left --&gt;
149                <select id="seven">
150                        <option value="alpha">Alpha</option>
151                        <option value="beta">Beta</option>
152                        <option value="gamma">Gamma</option>
153                        <option value="delta">Delta</option>
154                </select>
155
156                <span id="seven_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["seven"]'>
157                        tooltip on a select<br>
158                        two line tooltip.
159                </span>
160        </span>
161
162        <p></p>
163
164        <form>
165                <input id="id1" value="#1"/><br>
166                <input id="id2" value="#2"/><br>
167                <input id="id3" value="#3"/><br>
168                <input id="id4" value="#4"/><br>
169                <input id="id5" value="#5"/><br>
170                <input id="id6" value="#6"/><br>
171        </form>
172        <br>
173
174        <div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;">
175                <span id="s1">s1 text</span><br><br><br>
176                <span id="s2">s2 text</span><br><br><br>
177                <span id="s3">s3 text</span><br><br><br>
178                <span id="s4">s4 text</span><br><br><br>
179                <span id="s5">s5 text</span><br><br><br>
180        </div>
181
182        <span id="id1_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["id1"]'>
183
184        tooltip for #1<br>
185        long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;long&nbsp;text<br>
186        make sure that this works properly with a really narrow window
187        </span>
188
189        <span id="id2_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["id2"]'>tooltip for #2</span>
190        <span id="id3_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["id3"]'>tooltip for #3</span>
191        <span id="id4_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["id4"]'>tooltip for #4</span>
192        <span id="id5_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["id5"]'>tooltip for #5</span>
193        <span id="id6_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["id6"]'>tooltip for #6</span>
194
195        <span id="s1_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["s1"]'>s1 tooltip</span>
196        <span id="s2_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["s2"]'>s2 tooltip</span>
197        <span id="s3_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["s3"]'>s3 tooltip</span>
198        <span id="s4_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["s4"]'>s4 tooltip</span>
199        <span id="s5_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["s5"]'>s5 tooltip</span>
200
201        <h3>One Tooltip for multiple connect nodes</h3>
202        <span data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["multi1","multi2"], id:"multi1,multi2_tooltip", style:"display:none;"'>multi tooltip</span>
203        <a id="multi1" href="#bogus">multi1</a><br><a id="multi2" href="#bogus">multi2</a>
204
205        <h3>One Tooltip for multiple connect nodes w/ dojoType</h3>
206        <span dojoType="dijit.Tooltip" connectId="oldmulti1, oldmulti2" id="oldmulti1,oldmulti2_tooltip" style="display:none">multi tooltip dojoType</span>
207        <a id="oldmulti1" href="#bogus">multi1</a><br><a id="oldmulti2" href="#bogus">multi2</a>
208
209
210        <h3>Dynamic target tooltip</h3>
211        <div>
212                <button onclick="addDynamicTarget('t1');">Add</button>
213                <button onclick="removeDynamicTarget('t1');">Remove</button>
214                <span id="t1" tabIndex="0">t1 text</span><br>
215                <button onclick="addDynamicTarget('t2');">Add</button>
216                <button onclick="removeDynamicTarget('t2');">Remove</button>
217                <span id="t2" tabIndex="0">t2 text</span><br>
218                <button onclick="addDynamicTarget('t3');">Add</button>
219                <button onclick="removeDynamicTarget('t3');">Remove</button>
220                <span id="t3" tabIndex="0">t3 text</span><br>
221                <button onclick="addDynamicTarget('t4');">Add</button>
222                <button onclick="removeDynamicTarget('t4');">Remove</button>
223                <span id="t4" tabIndex="0">t4 text</span><br>
224                <button onclick="addDynamicTarget('t5');">Add</button>
225                <button onclick="removeDynamicTarget('t5');">Remove</button>
226                <span id="t5" tabIndex="0">t5 text</span><br>
227        </div>
228        <span id="t_connected_id"></span><br>
229        <span id="t_shown">Tooltip hidden (initial)</span>
230
231        <span id="t_tooltip" data-dojo-type="dijit.Tooltip" data-dojo-props='connectId:["t1","t3"]'>Dynamic target tooltip</span>
232</body>
233</html>
Note: See TracBrowser for help on using the repository browser.