1  <html>
 2  
 3  <!-- =======================================================================
 4  
 5  This file contains the HTML source for the FadingTooltip test harness
 6  described in this IBM developerWorks article:
 7  
 8     Finite state machines in JavaScript, Part 1: Designing a widget
 9     http://www.ibm.com/developerworks/library/wa-finitemach1/
10  
11  (c) Copyright IBM Corporation 2006. All rights reserved.
12   
13  U.S. Government Users Restricted Rights - Use, duplication or disclosure 
14  restricted by GSA ADP Schedule Contract with IBM Corp.
15      
16                                            -- Edward Pring <pring@us.ibm.com>
17  ======================================================================== -->
18  
19  <head>
20  <title>test harness for FadingTooltip widget</title>
21  
22      <link rel=stylesheet href="./FadingTooltipTests.css" type="text/css">
23      <script src="FadingTooltip.js" content="text/javascript"></script>
24  
25      <script content="text/javascript">
26          function createFadingTooltip(id, content, parameters) {
27              new FadingTooltip(document.getElementById(id), content, parameters);
28          }
29      </script>
30  </head>
31  
32  <body> 
33      <h3 id="tests">test harness for FadingTooltip widget</h3>
34  
35      <p>These HTML elements have tooltips defined with the HTML "title" attribute:
36      <div class="TestStyle">
37          Here are some <span title="Move your cursor a bit to the right, please.">fields with built-in tooltips</span>: 
38          <input type="text" title="Type your bank account and PIN numbers here, please ..." size=25>
39          <input type="button" title="Go ahead. Press it. What"s the harm? Trust me." value="Press this button">
40      </div>
41      
42      <p>These HTML elements have tooltips defined with the FadingTooltip widget:
43      <div id="tests" class="TestStyle">
44          Here are some <span id="TestLabel">more elaborate tooltips</span>: 
45          <input type="text" id="TestInput" size=25>
46          <input type="button" id="TestButton" value="Press this button">
47      
48          <script content="text/javascript">
49              createFadingTooltip("TestLabel", 
50                                  "Move your cursor a bit to the right, please ...");
51              createFadingTooltip("TestInput", 
52                                  "Type the following, <i>please</i>:" +
53                                  "<ul compact style="margin-top: 0; margin-bottom: 0">" +
54                                  "<li>your bank account number" + 
55                                  "<li>your PIN number" +
56                                  "</ul>" +
57                                  "<i>Thank you</i> in advance.", 
58                                  { fadeinTime: 3,
59                                    fadeoutTime: 3 } );
60              createFadingTooltip("TestButton", 
61                                  "<img src="smiley.gif" align="absmiddle">" +
62                                  "<big>Go ahead.</big> " +
63                                  "Press it. " +
64                                  "<small>What"s the harm? <small>Trust me.</small></small>", 
65                                  { tooltipOpacity: 1, 
66                                    tooltipClass: "AnotherTestStyle",
67                                    pauseTime: 2,
68                                    fadeinTime: 0.5, 
69                                    displayTime: 0, 
70                                    fadeoutTime: 10,
71                                    trace: true } );
72          </script>
73      </div>
74  </body> 
75  </html>