Changeset 8092 for dijit/trunk/tests/test_Tooltip.html

Timestamp:

04/13/07 20:14:01 (20 months ago)

Author:

bill

Message:

For performance reasons, make one master tooltip that looks like a voice bubble
that's used all over the page.

The "Tooltip" widget just monitors mouse movements on the target node,
and sends commands (hmm, should this be implementedas a topic?)
to the master tooltip.

Refs #2639.

Files:

• dijit/trunk/tests/test_Tooltip.html (modified) (4 diffs)

dijit/trunk/tests/test_Tooltip.html

@@ -20 +20 @@
                 
                 /* override tooltip style for this page */
-
                 body .dojoTooltipContainer { color: blue; border: solid 2px blue; padding: 4px; }
                 body .dojoTooltip .dojoTooltipConnector { border-bottom-color: blue; }
-
-                /* and then have some tooltips that look different than the others (just for testing) */
-                body .waves { color: red; font-style: italic; background: url(images/2.jpg) top right; border: red 3px dotted;}
-                body .bridge { color: yellow; background: url(images/1.jpg) bottom right; font-family: cursive; font-size: 14pt; }
         </style>
 </head>
@@ -43 +38 @@
                 
                 <a id="three" href="#bogus">anchor</a>
-                <span dojoType="dijit.Tooltip" connectId="three" caption="inline caption w/fade in" toggle="fade" style="display:none;"></span>
+                <span dojoType="dijit.Tooltip" connectId="three" caption="inline caption" style="display:none;"></span>
         </p>
         
         <button id="four">button</button>
-        <span dojoType="dijit.Tooltip" connectId="four" caption="tooltip on button" toggle="fade" style="display:none;"></span>
-        
-        <img id="five" src="images/question.gif"></img>
-        <span dojoType="dijit.Tooltip" connectId="five" toggle="explode" toggleDuration="250" class="waves" style="display:none;">
-                exploding tooltip
-        </span>
-        <img id="six" src="images/question.gif"></img>
-        <span dojoType="dijit.Tooltip" connectId="six" toggle="explode" toggleDuration="500" class="waves" style="display:none;">
-                slowly exploding tooltip
-        </span>
+        <span dojoType="dijit.Tooltip" connectId="four" caption="tooltip on button" style="display:none;"></span>
 
     <select id="seven">
@@ -64 +50 @@
       <option value="delta">Delta</option>
     </select>
-        <span dojoType="dijit.Tooltip" connectId="seven" href="doc0.html" toggle="fade" 
-                executeScripts="true" style="width: 300px; display:none;" class="bridge"></span>
+        <span dojoType="dijit.Tooltip" connectId="seven" 
+                style="display:none;">tooltip on a select<br>two line tooltip.</span>
 
 <p></p>
@@ -88 +74 @@
 </div>
 
-        <span dojoType="dijit.Tooltip" connectId="id1" delay="100" toggle="explode" style="display:none;">some text 1</span>
-        <span dojoType="dijit.Tooltip" connectId="id2" delay="100" toggle="explode" style="display:none;">some text 2</span>
-        <span dojoType="dijit.Tooltip" connectId="id3" delay="100" toggle="explode" style="display:none;">some text 3</span>
-        <span dojoType="dijit.Tooltip" connectId="id4" delay="100" toggle="explode" style="display:none;">some text 4</span>
-        <span dojoType="dijit.Tooltip" connectId="id5" delay="100" toggle="explode" style="display:none;">some text 5</span>
+        <span dojoType="dijit.Tooltip" connectId="id1" style="display:none;">some text 1</span>
+        <span dojoType="dijit.Tooltip" connectId="id2" style="display:none;">some text 2</span>
+        <span dojoType="dijit.Tooltip" connectId="id3" style="display:none;">some text 3</span>
+        <span dojoType="dijit.Tooltip" connectId="id4" style="display:none;">some text 4</span>
+        <span dojoType="dijit.Tooltip" connectId="id5" style="display:none;">some text 5</span>
         <span dojoType="dijit.Tooltip" connectId="id6" toggle="explode" style="display:none;">some text </span>
 
-        <span dojoType="dijit.Tooltip" connectId="s1" delay="100" toggle="explode" style="display:none;">some text 6</span>
-        <span dojoType="dijit.Tooltip" connectId="s2" delay="100" toggle="explode" style="display:none;">some text 7</span>
-        <span dojoType="dijit.Tooltip" connectId="s3" delay="100" toggle="explode" style="display:none;">some text 8</span>
-        <span dojoType="dijit.Tooltip" connectId="s4" delay="100" toggle="explode" style="display:none;">some text 9</span>
-        <span dojoType="dijit.Tooltip" connectId="s5" delay="100" toggle="explode" style="display:none;">some text 10</span>
+        <span dojoType="dijit.Tooltip" connectId="s1" style="display:none;">some text 6</span>
+        <span dojoType="dijit.Tooltip" connectId="s2" style="display:none;">some text 7</span>
+        <span dojoType="dijit.Tooltip" connectId="s3" style="display:none;">some text 8</span>
+        <span dojoType="dijit.Tooltip" connectId="s4" style="display:none;">some text 9</span>
+        <span dojoType="dijit.Tooltip" connectId="s5" style="display:none;">some text 10</span>
 
-        <div style="position: absolute; bottom: 0">
-                Test tooltips on stuff on bottom of screen.  Should appear above the element.
-                <span id="b1" class="tt">text</span>
-                <span dojoType="dijit.Tooltip" connectId="b1" style="display:none;">
-                        <b>
-                                <span style="color: blue;">rich formatting</span>
-                                <span style="color: red; font-size: x-large;"><i>!</i></span>
-                        </b>
-                </span>
-            <select id="b2">
-              <option value="alpha">Alpha</option>
-              <option value="beta">Beta</option>
-              <option value="gamma">Gamma</option>
-              <option value="delta">Delta</option>
-            </select>
-                <span dojoType="dijit.Tooltip" connectId="b2" href="doc0.html" executeScripts="true" style="width: 300px; display:none;"></span>
-        </div>
-                
 </body>
 </html>