Subversion Repositories wimsdev

Rev

Rev 5787 | Blame | Last modification | View Log | RSS feed

  1.  
  2. <style type="text/css">
  3. /*<![CDATA[*/
  4. .tt {
  5.   font-size:12px;
  6. }
  7.  
  8. #T2tDirect {
  9.   border:2px solid red;
  10.   background:yellow;
  11.   padding:3px;
  12. }
  13. /*]]>*/
  14. </style>
  15. <script type="text/javascript">
  16. /*<![CDATA[*/
  17. function FixCalcXY(el)
  18. {
  19.     if(typeof(el.offsetParent) == "undefined")
  20.         return [70, 4000];
  21.         var a = new Array(0, -70);
  22.         while(el)
  23.         {
  24.                 a[0] += el.offsetLeft || 0;
  25.                 a[1] += el.offsetTop || 0;
  26.                 el = el.offsetParent || null;
  27.         }
  28.         return a;
  29. }
  30. /*]]>*/
  31. </script>
  32.  
  33.     <table>
  34.       <tbody><tr>
  35.         <td style="width:50px"></td>
  36.         <td>
  37.           <table style="background-color:#000099" border="0" cellpadding="0" cellspacing="0">
  38.             <tbody><tr>
  39.               <td>
  40.                 <table border="0" cellpadding="6" cellspacing="1" width="100%">
  41.                   <tbody><tr style="background-color:#eeeeee">
  42.                     <th align="left">Command</th>
  43.                     <th align="left">Description</th>
  44.                   </tr>
  45.                   <tr style="background-color:#ffffff" valign="top">
  46.                     <td>
  47.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Tooltip positioned above mouse pointer', ABOVE, true);">ABOVE</a></span>
  48.                     </td>
  49.                     <td>
  50.                       Positions the tooltip above the mousepointer.
  51.                       Value: true or false.
  52.                       <br/>&nbsp;<br/>
  53.                       Combine with
  54.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('These commands have been applied:<br/>ABOVE, true, OFFSETY, 50', ABOVE,true,OFFSETY,50);">OFFSETY</a></span>
  55.                       to adjust the vertical distance from the mousepointer,
  56.                       or with
  57.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('These commands have been applied:<br/>ABOVE, true, CENTERMOUSE, true', ABOVE, true, CENTERMOUSE, true, OFFSETX, 0);">CENTERMOUSE</a></span>
  58.                       to center the tooltip horizontally above the mousepointer.
  59.                     </td>
  60.                   </tr>
  61.                   <tr style="background-color:#ffffff" valign="top">
  62.                     <td>
  63.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Changed background color', BGCOLOR,'#f3e0f3');">BGCOLOR</a></span>
  64.                     </td>
  65.                     <td>
  66.                       Background color of the tooltip.
  67.                       Value: HTML color, in single quotes, e.g. '#D3E3F6' or 'DarkCyan',
  68.                       or empty string <span class="tt">''</span> for
  69.                       <span class="tt"><a class="nodeco" href="javascript:void(0)" onmouseover="Tip('This tooltip has neither a background<br/>nor a border', BORDERWIDTH, 0, BGCOLOR, '', FONTWEIGHT, 'bold', FONTCOLOR, '#00AA00')">no background</a></span>.
  70.                       <br/>Example:
  71.                       <br/>
  72.                       <span class="tt">onmouseover="Tip('Some text', BGCOLOR, '#D3E3F6')"</span>
  73.                       <br/>or<br/>
  74.                       <span class="tt">onmouseover="Tip('Some text', BGCOLOR, '')"</span>
  75.                     </td>
  76.                   </tr>
  77.                   <tr style="background-color:#ffffff" valign="top">
  78.                     <td>
  79.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Tooltip with background image', BGIMG, '../images/tooltip/tt_bg.jpg', PADDING, 10, WIDTH, 180);">BGIMG</a></span>
  80.                     </td>
  81.                     <td>
  82.                       Background image.
  83.                       Value: Path to image, in single quotes.
  84.                       <br/>Example:
  85.                       <br/>
  86.                       <span class="tt">onmouseover="Tip('Some text', BGIMG, '../images/tipbackground.gif')"</span>
  87.                     </td>
  88.                   </tr>
  89.                   <tr style="background-color:#ffffff" valign="top">
  90.                     <td>
  91.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered border color', BORDERCOLOR, '#dd00aa');">BORDERCOLOR</a></span>
  92.                     </td>
  93.                     <td>
  94.                       Border color.
  95.                       Value: HTML color, in single quotes, e.g. '#dd00aa'.
  96.                     </td>
  97.                   </tr>
  98.                   <tr style="background-color:#ffffff" valign="top">
  99.                     <td>
  100.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Dashed border style', BORDERSTYLE, 'dashed', PADDING, 8);">BORDERSTYLE</a></span>
  101.                     </td>
  102.                     <td>
  103.                       Border style.
  104.                       Value: CSS border style, in single quotes.
  105.                       Recommend are 'solid' (default), 'dashed' or 'dotted', others may not work in all browsers.
  106.                     </td>
  107.                   </tr>
  108.                   <tr style="background-color:#ffffff" valign="top">
  109.                     <td>
  110.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Width of tooltip border', BORDERWIDTH, 5);">BORDERWIDTH</a></span>
  111.                     </td>
  112.                     <td>
  113.                       Width of tooltip border.
  114.                       Value: Integer&nbsp;&#8805;&nbsp;0. Default is 1. Use 0 for no border.
  115.                       <br/>Example:
  116.                       <br/>
  117.                       <span class="tt">onmouseover="Tip('Some text', BORDERWIDTH, 2)"</span>
  118.                     </td>
  119.                   </tr>
  120.                   <tr style="background-color:#ffffff" valign="top">
  121.                     <td align="right">
  122.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Centered beneath the mouse', CENTERMOUSE, true, OFFSETX, 0, OFFSETY, 22);">CENTERMOUSE</a></span>
  123.                     </td>
  124.                     <td>
  125.                       Centers the tooltip horizontally beneath (or above) the mousepointer.
  126.                       Value: true or false.
  127.                       Consider that the tooltip is offset from the center by the value globally set in wz_tooltip.js (<span class="tt">config.&nbsp;OffsetX</span>), or as specified by the OFFSETX command.
  128.                       <br/>Example:
  129.                       <br/>
  130.                       <span class="tt">onmouseover="Tip('Some text', CENTERMOUSE, true, OFFSETX, 0)"</span>
  131.                     </td>
  132.                   </tr>
  133.                   <tr style="background-color:#ffffff" valign="top">
  134.                     <td>
  135.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('This tooltip is &quot;sticky&quot;, but it can be closed by clicking into the tooltip or document, since the command CLICKCLOSE, true has been applied.', CLICKCLOSE, true, STICKY, true, WIDTH, 300);">CLICKCLOSE</a></span>
  136.                     </td>
  137.                     <td>
  138.                       Closes the tooltip once the user clicks somewhere inside the tooltip or into the document.
  139.                       Value: true, false.
  140.                     </td>
  141.                   </tr>
  142.                   <tr style="background-color:#ffffff" valign="top">
  143.                     <td>
  144.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Closebutton in the titlebar', CLOSEBTN, true, STICKY, true);">CLOSEBTN</a></span>
  145.                     </td>
  146.                     <td>
  147.                       Displays a closebutton in the titlebar.
  148.                       Value: true, false.
  149.                     </td>
  150.                   </tr>
  151.                   <tr style="background-color:#ffffff" valign="top">
  152.                     <td>
  153.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered closebutton colors', CLOSEBTN, true, STICKY, true, CLOSEBTNCOLORS, ['#7799cc', '#ffaaaa', '#ffffff', '#ff0000']);">CLOSEBTNCOLORS</a></span>
  154.                     </td>
  155.                     <td>
  156.                       Colors used for the closebutton.
  157.                       <br/>&nbsp;<br/>
  158. Value must be a comma-separated array of 4 color values. Each color in
  159. single quotes. The entire array must be enclosed with a pair of square
  160. brackets, see example below, since it's actually a single parameter.
  161. The 4 colors have the following meanings: <br/>
  162.                      1. Background color
  163.                      <br/>
  164.                      2. Text color
  165.                      <br/>
  166.                      3. Highlighted background, while the button is being hovered
  167.                      <br/>
  168.                      4. Hilighted text color, while the button is being hovered
  169.                      <br/>
  170.                      For each of these colors, you can also specify an empty string <span class="tt">''</span>,
  171.                      in which case the title background, or title text color, respectively, is used for that button state.
  172.                      <br/>&nbsp;<br/>
  173.                      Example:<br/>
  174.                      <span class="tt">Tip('Text', CLOSEBTN, true, CLOSEBTNCOLORS, ['', '#66ff66', 'white', '#00cc00'], STICKY, true)</span>
  175.                      <br/>
  176.                      In this example, the first color value (background color) is an empty string.
  177.                      Therefore the closebutton inherits the titlebar background.
  178.                    </td>
  179.                  </tr>
  180.                  <tr style="background-color:#ffffff" valign="top">
  181.                    <td>
  182.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered closebutton text', CLOSEBTN, true, STICKY, true, CLOSEBTNTEXT, 'Click Me');">CLOSEBTNTEXT</a></span>
  183.                    </td>
  184.                    <td>
  185.                      Text in the closebutton.
  186.                      Value must be enclosed with single quotes.
  187.                      Example:
  188.                      <br/>
  189.                      <span class="tt">Tip('Tooltip text', CLOSEBTN, true, CLOSEBTNTEXT, 'Click Me', STICKY, true)</span>
  190.                      <br/>
  191. Globally preset in wz_tooltip.js is '&amp;nbsp;X&amp;nbsp;' - the
  192. whitespace entities '&amp;nbsp;' add some horizontal padding to the
  193. button. </td>
  194.                  </tr>
  195.                  <tr style="background-color:#ffffff" valign="top">
  196.                    <td>
  197.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="TagToTip('T2tDirect', COPYCONTENT, false, PADDING, 0, BORDERWIDTH, 0, WIDTH, 280);">COPYCONTENT</a></span>
  198.                      <div style="display: none;" id="T2tDirect">
  199. Actually, this DIV was embedded right into the HTML of the document,
  200. but it has been temporarily converted to a tooltip. </div>
  201.                    </td>
  202.                    <td>
  203.                      COPYCONTENT has only effect on tooltips created with <span class="tt">TagToTip()</span>, that is, if an HTML element is to be converted to a tooltip.
  204.                      <br/>
  205.                      Value: true, false.
  206.                      <br/>
  207. If true (this is the default behaviour preset in wz_tooltip.js), just a
  208. copy of the text (or inner HTML) of the HTML element is inserted into
  209. the tooltip. If false, the entire HTML element (its DOM node) by itself
  210. is temporarily converted to a tooltip, which may be useful in the
  211. following aspects: <br/> 1.) If the HTML element converted to a
  212. tooltip contains a form with inputs, their current user input will be
  213. maintained even while the tooltip is not displayed. <br/>
  214.                      2.) The tooltip inherits the style properties of the HTML element.
  215.                      <br/>
  216.                      Example how to convert an HTML element entirely to a tooltip, by applying COPYCONTENT with the value <span class="tt">false</span>:
  217.                      <br/>
  218.                      <span class="tt">TagToTip('SomeID', COPYCONTENT, false, BORDERWIDTH, 0, PADDING, 0)</span>
  219.                      <br/>
  220. Moreover, this example turns off the native tooltip border
  221. (BORDERWIDTH,&nbsp;0), and sets the native tooltip padding to zero, so
  222. only the padding and border defined for the HTML element itself are
  223. displayed. </td>
  224.                  </tr>
  225.                  <tr style="background-color:#ffffff" valign="top">
  226.                    <td>
  227.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Delay of 1000 ms until the tooltip shows up.<br/><br/>A small delay of 400 ms is preset in wz_tooltip.js (in the section &quot;GLOBAL TOOLTIP CONFIGURATION&quot;) and can be changed there. Note, however, that values much shorter or longer than 500 ms might be perceived as irritating.', DELAY, 1000, WIDTH, 360);">DELAY</a></span>
  228.                    </td>
  229.                    <td>
  230.                      Tooltip shows up after the specified timeout, in milliseconds.
  231.                      A behavior similar to OS based tooltips.
  232.                      <br/>
  233.                      Value:
  234.                      Integer&nbsp;&#8805;&nbsp;0. Use 0 for no delay.
  235.                      In wz_tooltip.js preset and recommended is 400.
  236.                      <br/>Example:
  237.                      <br/>
  238.                      <span class="tt">onmouseover="Tip('Some text', DELAY, 1000)"</span>
  239.                    </td>
  240.                  </tr>
  241.                  <tr style="background-color:#ffffff" valign="top">
  242.                    <td>
  243.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Lifetime of this tip has been limited to 2500 milliseconds', DURATION, 2500);">DURATION</a></span>
  244.                    </td>
  245.                    <td>
  246.                      Time span, in milliseconds, until the tooltip will be hidden,
  247.                      even if the <span class="tt">STICKY</span> command has been applied,
  248.                      or even if the mouse is still on the HTML element that has triggered the tooltip.
  249.                      <br/>
  250.                      Value:
  251.                      Integer&nbsp;&#8805;&nbsp;0.
  252.                      Use 0 for no limitation (this is the default)
  253.                    </td>
  254.                  </tr>
  255.                  <tr style="background-color:#ffffff" valign="top">
  256.                    <td>
  257.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Fade-in animation', FADEIN, 1000, PADDING, 10);">FADEIN</a></span>
  258.                    </td>
  259.                    <td>
  260.                      Fade-in animation.
  261.                      The value (integer&nbsp;&#8805;&nbsp;0) specifies the duration of the animation, in milliseconds.
  262.                      0 for no animation.
  263.                      <br/>&nbsp;<br/>
  264.                      Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror.
  265.                      These fall back to normal, non-animated behaviour.
  266.                    </td>
  267.                  </tr>
  268.                  <tr style="background-color:#ffffff" valign="top">
  269.                    <td>
  270.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Fade-out animation', FADEOUT, 1000, PADDING, 10);">FADEOUT</a></span>
  271.                    </td>
  272.                    <td>
  273.                      Fade-out animation.
  274.                      The value (integer&nbsp;&#8805;&nbsp;0) specifies the duration of the animation, in milliseconds.
  275.                      0 for no animation.
  276.                      <br/>&nbsp;<br/>
  277.                      Recommended: combine with
  278.                      <span class="tt"><a class="nodeco" href="javascript:void(0)" onmouseover="Tip('On another fast trip in Bavaria<br/><img src=\'../images/ko5obersoech.jpg\' width=\'180\' height=\'115\' \/>', FADEIN, 800, FADEOUT, 800, TEXTALIGN, 'center', BGCOLOR, '#ffffff')">FADEIN</a></span>.
  279.                      <br/>&nbsp;<br/>
  280.                      Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror.
  281.                      These fall back to normal, non-animated behaviour.
  282.                    </td>
  283.                  </tr>
  284.                  <tr style="background-color:#ffffff" valign="top">
  285.                    <td>
  286.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Tooltip at fixed position', FIX, FixCalcXY(this));">FIX</a></span>
  287.                    </td>
  288.                    <td>
  289.                      Shows the tooltip at the fixed coordinates [x, y].
  290.                      Value: Square-bracketed array of two integers.
  291.                      Example:<br/>
  292.                      <span class="tt">onmouseover="Tip('Some text', FIX, [230, 874])"</span>
  293.                      <br/>
  294.                      You can also call function(s) defined elsewhere that calculate the coordinates dynamically:
  295.                      <br/>
  296.                      <span class="tt">onmouseover="Tip('Text', FIX, [CalcFixX(), CalcFixY()], BORDERWIDTH, 2)"</span>
  297.                      <br/>
  298.                      or
  299.                      <br/>
  300.                      <span class="tt">onmouseover="Tip('Text', FIX, CalcFixXY(), ABOVE, true)"</span>
  301.                      <br/>
  302.                      In the latter example, the function CalcFixXY() must return an array containing the two numbers.
  303.                    </td>
  304.                  </tr>
  305.                  <tr style="background-color:#ffffff" valign="top">
  306.                    <td>
  307.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('This tooltip doesn\'t follow the movements of the mouse since we\'ve applied the FOLLOWMOUSE command with the value false', FOLLOWMOUSE, false, WIDTH, 300);">FOLLOWMOUSE</a></span>
  308.                    </td>
  309.                    <td>
  310.                      The tooltip follows the movements of the mouse.
  311.                      Value: true, false. Default: true.
  312.                      <br/>&nbsp;<br/>
  313.                      When turning this off by applying the value false,
  314.                      the tooltip behaves like OS-based tooltips which don't follow the mouse.
  315.                     </td>
  316.                   </tr>
  317.                   <tr style="background-color:#ffffff" valign="top">
  318.                     <td>
  319.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered font color', FONTCOLOR, '#ff0000');">FONTCOLOR</a></span>
  320.                     </td>
  321.                     <td>
  322.                       Font color.
  323.                       Value: HTML color, in single quotes, e.g. '#990099'
  324.                     </td>
  325.                   </tr>
  326.                   <tr style="background-color:#ffffff" valign="top">
  327.                     <td>
  328.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Changed font face', FONTFACE, 'Courier New, Courier, mono');">FONTFACE</a></span>
  329.                     </td>
  330.                     <td>
  331.                       Font face (font family).
  332.                       <br/>
  333.                       Value:
  334.                       As you'd specify it in HTML or CSS, enclosed with single quotes, e.g.
  335.                      <span class="tt">Tip('Some text', FONTFACE, 'Arial, Helvetica, sans-serif', FONTSIZE, '12pt')</span>
  336.                    </td>
  337.                  </tr>
  338.                  <tr style="background-color:#ffffff" valign="top">
  339.                    <td>
  340.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Oops...', FONTSIZE, '72pt');">FONTSIZE</a></span>
  341.                    </td>
  342.                    <td>
  343.                      Font size.
  344.                      Value: Size with unit, in single quotes.
  345.                      Unit ('px', 'pt', 'em' etc.) is mandatory.
  346.                    </td>
  347.                  </tr>
  348.                  <tr style="background-color:#ffffff" valign="top">
  349.                    <td>
  350.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('FONTWEIGHT, \'bold\'', FONTWEIGHT, 'bold');">FONTWEIGHT</a></span>
  351.                    </td>
  352.                    <td>
  353.                      Font weight.
  354.                      Value: 'normal' or 'bold', in single quotes.
  355.                    </td>
  356.                  </tr>
  357.                  <tr style="background-color:#ffffff" valign="top">
  358.                    <td align="right">
  359.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('On the other side', LEFT, true);">LEFT</a></span>
  360.                    </td>
  361.                    <td>
  362.                      Tooltip positioned on the left side of the mousepointer.
  363.                      Value: true, false.
  364.                      <br/>
  365.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('LEFT and ABOVE combined...', LEFT, true, ABOVE, true);">LEFT and ABOVE commands combined</a></span>.
  366.                      <br/>Example:
  367.                      <br/>
  368.                      <span class="tt">onmouseover="Tip('Some text', LEFT, true, ABOVE, true)"</span>
  369.                    </td>
  370.                  </tr>
  371.                  <tr style="background-color:#ffffff" valign="top">
  372.                    <td>
  373.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Increased horizontal offset from the mouse', OFFSETX, 150);">OFFSETX</a></span>
  374.                    </td>
  375.                    <td>
  376.                      Horizontal offset from mouse-pointer.
  377.                      Value: Any integer. May also be negative.
  378.                    </td>
  379.                  </tr>
  380.                  <tr style="background-color:#ffffff" valign="top">
  381.                    <td>
  382.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Increased vertical distance from the mouse', OFFSETY, 70);">OFFSETY</a></span>
  383.                    </td>
  384.                    <td>
  385.                      Vertical offset from the mouse-pointer.
  386.                      Value: Any integer. May also be negative.
  387.                    </td>
  388.                  </tr>
  389.                  <tr style="background-color:#ffffff" valign="top">
  390.                    <td>
  391.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('A semi-transparent Tooltip', OPACITY, 70, PADDING, 14);">OPACITY</a></span>
  392.                    </td>
  393.                    <td>
  394.                      Transparency of tooltip.
  395.                      Value: Integer between 0 (fully transparent) and 100 (opaque, no transparency).
  396.                      <br/>&nbsp;<br/>
  397.                      Opacity is the opposite of transparency, i.e.<br/>
  398.                      opacity&nbsp;=&nbsp;100&nbsp;-&nbsp;transparency&nbsp;(in&nbsp;percent).<br/>
  399.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('<img src=../images/dragdrop/fateba_fi.jpg width=130 height=103/><br/>Tooltip with image, shadow, background image and fade-in/fade-out animation.', WIDTH, 180, OPACITY, 80, TEXTALIGN, 'center', TITLEALIGN, 'center', SHADOW, true, TITLE, 'Nifty', BGIMG, '../images/tooltip/tt_bg.jpg', FADEIN, 700, FADEOUT, 700);">Another example</a></span>
  400. with image (taken on my 9000-km / 5500-miles recumbent bicycle trip
  401. Hamburg-Northcape-Munich), shadow via SHADOW command, content centered
  402. using TEXTALIGN, background image via BGIMG and animation via FADEIN
  403. and FADEOUT commands. <br/>&nbsp;<br/>
  404.                      Not supported in Opera prior to v.9.0, old versions of Safari and some versions of Konqueror.
  405.                    </td>
  406.                  </tr>
  407.                  <tr style="background-color:#ffffff" valign="top">
  408.                    <td>
  409.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Tip with plenty of padding around its content', PADDING, 30);">PADDING</a></span>
  410.                    </td>
  411.                    <td>
  412.                      Inner spacing of tooltip, between border and content.
  413.                      Value: Integer &#8805; 0.
  414.                    </td>
  415.                  </tr>
  416.                  <tr style="background-color:#ffffff" valign="top">
  417.                    <td>
  418.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('SHADOW, true', SHADOW, true);">SHADOW</a></span>
  419.                    </td>
  420.                    <td>
  421.                      Tooltip drops a shadow.
  422.                      Value: true, false
  423.                    </td>
  424.                  </tr>
  425.                  <tr style="background-color:#ffffff" valign="top">
  426.                    <td>
  427.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('This one drops a shadow (SHADOW command),<br/>and its shadow color has been changed (SHADOWCOLOR command)', PADDING, 8, SHADOW, true, SHADOWCOLOR, '#dd99aa');">SHADOWCOLOR</a></span>
  428.                      <!--br>
  429.  
  430.                      <form> &nbsp; &nbsp; <select><option>aaa</option><option>bbb</option><option>ccc</option></select></form-->
  431.                    </td>
  432.                    <td>
  433.                      Shadow color.
  434.                      Value: HTML color, in single quotes.
  435.                      <br/>Example:
  436.                      <br/>
  437.                      <span class="tt">onmouseover="Tip('Some text', SHADOW, true, SHADOWCOLOR, '#dd99aa')"</span>
  438.                    </td>
  439.                  </tr>
  440.                  <tr style="background-color:#ffffff" valign="top">
  441.                    <td>
  442.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Increased shadow width', SHADOW, true, SHADOWWIDTH, 10, PADDING, 8);">SHADOWWIDTH</a></span>
  443.                    </td>
  444.                    <td>
  445.                      Shadow width (offset).
  446.                      Value: Integer&nbsp;&#8805;&nbsp;0.
  447.                      <br/>Example:
  448.                      <br/>
  449.                      <span class="tt">onmouseover="Tip('Some text', SHADOW, true, SHADOWWIDTH, 7)"</span>
  450.                    </td>
  451.                  </tr>
  452.                  <tr style="background-color:#ffffff" valign="top">
  453.                    <td>
  454.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('STICKY, true<ul><li style=\'font-family:Verdana,Geneva,sans-serif;font-size:8pt;\'><a href=#top>Top of page<\/a><\/li><li style=\'font-family:Verdana,Geneva,sans-serif;font-size:8pt;\'><a href=\'#docu\'>Begin of documentation<\/a><\/li><\/ul>', STICKY, true, CLICKCLOSE, true, PADDING, 6);">STICKY</a></span>
  455.                    </td>
  456.                    <td>
  457.                      The tooltip stays fixed at its initial position until another tooltip pops up.
  458.                      Value: true, false.
  459.                      <br/>&nbsp;<br/>
  460.                      With
  461.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('STICKY, true, DURATION, 2500<br/>This tip is sticky, but its lifetime has been limited to 2.5 seconds.', STICKY, true, CLICKCLOSE, true, DURATION, 2500, WIDTH, 280)">DURATION</a></span>
  462.                      you can enforce the tooltip to disappear after a certain time span.
  463.                    </td>
  464.                  </tr>
  465.                  <tr style="background-color:#ffffff" valign="top">
  466.                    <td>
  467.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('The TEXTALIGN command takes as values either \'right\', \'center\', \'justify\' or \'left\', the latter being unnecessary since it is the default value.', WIDTH, 200, TITLE, 'Right-Aligned Text', TEXTALIGN, 'right');">TEXTALIGN</a></span>
  468.                    </td>
  469.                    <td>
  470.                      Aligns the text in the body of the tooltip.
  471.                      Value: 'right', 'center',
  472.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('<img align=\'right\' src=\'..\/images\/dragdrop\/muckl.jpg\' width=\'100\' height=\'130\'/>This is some quite lengthy text which demonstrates the justification effect which can be achieved by sending the TEXTALIGN command with the \'justify\' value. Note that text justification is not recommended for text that consists of relatively short lines - as is also the case in this tooltip, in particular with the text alongside the Muckl image above.', TITLE, 'Justified text with Muckl', TEXTALIGN, 'justify', WIDTH, 250);">'justify'</a></span>
  473.                      or 'left'.
  474.                      <br/>Example:
  475.                      <br/>
  476.                      <span class="tt">onmouseover="Tip('Some text', TEXTALIGN, 'right')"</span>
  477.                    </td>
  478.                  </tr>
  479.                  <tr style="background-color:#ffffff" valign="top">
  480.                    <td>
  481.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLE, \'Some title\'', TITLE, 'Some title');">TITLE</a></span>
  482.                    </td>
  483.                    <td>
  484.                      Display a titlebar.
  485.                      Value: Text to display, in single quotes.
  486.                      May even contain HTML, which gives you additional freedom in fashioning the titlebar.
  487.                    </td>
  488.                  </tr>
  489.                  <tr style="background-color:#ffffff" valign="top">
  490.                    <td>
  491.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('The TITLEALIGN command takes as values either \'right\', \'justify\' or \'left\', the latter being unnecessary since it is the default value.', WIDTH, 240, TITLE, 'Right-Aligned Title', TITLEALIGN, 'right');">TITLEALIGN</a></span>
  492.                    </td>
  493.                    <td>
  494.                      Aligns the text in the titlebar.
  495.                      Value: 'right', 'center', 'justify' or 'left'
  496.                    </td>
  497.                  </tr>
  498.                  <tr style="background-color:#ffffff" valign="top">
  499.                    <td>
  500.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEBGCOLOR, \'#990099\'', TITLE, 'Title background', TITLEBGCOLOR, '#990099');">TITLEBGCOLOR</a></span>
  501.                    </td>
  502.                    <td>
  503.                      Backgroundcolor of the titlebar.
  504.                      Value: HTML color, in single quotes.
  505.                      If it's an empty string <span class="tt">''</span>,
  506.                       the border color (see also BORDERCOLOR command) is used (this is the default).
  507.                     </td>
  508.                   </tr>
  509.                   <tr style="background-color:#ffffff" valign="top">
  510.                     <td>
  511.                       <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTCOLOR, \'#ff6666\'', TITLE, 'Red title',  TITLEFONTCOLOR, '#ff6666');">TITLEFONTCOLOR</a></span>
  512.                     </td>
  513.                     <td>
  514.                       Color of title text.
  515.                       Value: HTML color, in single quotes.
  516.                       If it's an empty string <span class="tt">''</span>, the backgroundcolor of the tooltip body (see also BGCOLOR command) is used (this is the default).
  517.                    </td>
  518.                  </tr>
  519.                  <tr style="background-color:#ffffff" valign="top">
  520.                    <td>
  521.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTFACE, \'Courier New, Courier, mono\'', TITLE, 'Changed Title Font',  TITLEFONTFACE, 'Courier New, Courier, mono');">TITLEFONTFACE</a></span>
  522.                    </td>
  523.                    <td>
  524.                      Font face for title text.
  525.                      Value: Like in HTML or CSS. Enclosed with single quotes.
  526.                      If the value is an empty string <span class="tt">''</span>, the tooltip body font, in boldified form, is used (this is the default).
  527.                      <br/>
  528.                      Example:
  529.                      <br/>
  530.                      <span class="tt">onmouseover="Tip('Some text', TITLE, 'Some Title', TITLEFONTFACE, 'Verdana,sans-serif')"</span>
  531.                      <br/>
  532.                    </td>
  533.                  </tr>
  534.                  <tr style="background-color:#ffffff" valign="top">
  535.                    <td>
  536.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTSIZE, \'18pt\'', TITLE, 'Big Title',  TITLEFONTSIZE, '18pt');">TITLEFONTSIZE</a></span>
  537.                    </td>
  538.                    <td>
  539.                      Font size of title text.
  540.                      Value: Size with unit, in single quotes.
  541.                      Unit ('px', 'pt', 'em' etc.) is mandatory.
  542.                      If the value is an empty string <span class="tt">''</span>, the fontsize of the tooltip body is applied.
  543.                    </td>
  544.                  </tr>
  545.                  <tr style="background-color:#ffffff" valign="top">
  546.                    <td>
  547.                      <span class="tt"><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('WIDTH, 200', WIDTH, 200);">WIDTH</a></span>
  548.                    </td>
  549.                    <td>
  550.                      Width of tooltip.
  551.                      Value: Integer&nbsp;&#8805;&nbsp;0.
  552.                      If 0 (the default), the width is automatically adapted to the content of the tooltip.
  553.                      <br/>&nbsp;<br/>
  554.                      Note that the tooltips follow the W3C box model,
  555.                      which means that the specified width applies to the actual content of the tooltip,
  556.                      excluding padding (see PADDING command), border and shadow.
  557.                    </td>
  558.                  </tr>
  559.                </tbody></table>
  560.              </td>
  561.            </tr>
  562.          </tbody></table>
  563.        </td>
  564.        <td style="width:50px"></td>
  565.      </tr>
  566.    </tbody></table>
  567.  
  568.