Rev 2071 | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 2071 | Rev 5787 | ||
---|---|---|---|
Line 30... | Line 30... | ||
30 | //--> |
30 | //--> |
31 | </script> |
31 | </script> |
32 | 32 | ||
33 | <table> |
33 | <table> |
34 | <tbody><tr> |
34 | <tbody><tr> |
35 | <td width="50"><br></td> |
35 | <td width="50"><br/></td> |
36 | <td> |
36 | <td> |
37 | <table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0"> |
37 | <table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0"> |
38 | <tbody><tr> |
38 | <tbody><tr> |
39 | <td> |
39 | <td> |
40 | <table border="0" cellpadding="6" cellspacing="1" width="100%"> |
40 | <table border="0" cellpadding="6" cellspacing="1" width="100%"> |
Line 47... | Line 47... | ||
47 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Tooltip positioned above mouse pointer', ABOVE, true);">ABOVE</a></tt> |
47 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Tooltip positioned above mouse pointer', ABOVE, true);">ABOVE</a></tt> |
48 | </td> |
48 | </td> |
49 | <td> |
49 | <td> |
50 | Positions the tooltip above the mousepointer. |
50 | Positions the tooltip above the mousepointer. |
51 | Value: true or false. |
51 | Value: true or false. |
52 | <br> <br |
52 | <br/> <br/> |
53 | Combine with |
53 | Combine with |
54 | <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></tt> |
54 | <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></tt> |
55 | to adjust the vertical distance from the mousepointer, |
55 | to adjust the vertical distance from the mousepointer, |
56 | or with |
56 | or with |
57 | <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></tt> |
57 | <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></tt> |
58 | to center the tooltip horizontally above the mousepointer. |
58 | to center the tooltip horizontally above the mousepointer. |
59 | </td> |
59 | </td> |
60 | </tr> |
60 | </tr> |
61 | <tr bgcolor="#ffffff" valign="top"> |
61 | <tr bgcolor="#ffffff" valign="top"> |
62 | <td> |
62 | <td> |
Line 64... | Line 64... | ||
64 | </td> |
64 | </td> |
65 | <td> |
65 | <td> |
66 | Background color of the tooltip. |
66 | Background color of the tooltip. |
67 | Value: HTML color, in single quotes, e.g. '#D3E3F6' or 'DarkCyan', |
67 | Value: HTML color, in single quotes, e.g. '#D3E3F6' or 'DarkCyan', |
68 | or empty string <tt>''</tt> for |
68 | or empty string <tt>''</tt> for |
69 | <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></tt>. |
69 | <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></tt>. |
70 | <br>Example: |
70 | <br/>Example: |
71 | <br> |
71 | <br/> |
72 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', BGCOLOR, '#D3E3F6')"</font></tt> |
72 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', BGCOLOR, '#D3E3F6')"</font></tt> |
73 | <br>or<br |
73 | <br/>or<br/> |
74 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', BGCOLOR, '')"</font></tt> |
74 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', BGCOLOR, '')"</font></tt> |
75 | </td> |
75 | </td> |
76 | </tr> |
76 | </tr> |
77 | <tr bgcolor="#ffffff" valign="top"> |
77 | <tr bgcolor="#ffffff" valign="top"> |
78 | <td> |
78 | <td> |
79 | <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></tt> |
79 | <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></tt> |
80 | </td> |
80 | </td> |
81 | <td> |
81 | <td> |
82 | Background image. |
82 | Background image. |
83 | Value: Path to image, in single quotes. |
83 | Value: Path to image, in single quotes. |
84 | <br>Example: |
84 | <br/>Example: |
85 | <br> |
85 | <br/> |
86 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', BGIMG, '../images/tipbackground.gif')"</font></tt> |
86 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', BGIMG, '../images/tipbackground.gif')"</font></tt> |
87 | </td> |
87 | </td> |
88 | </tr> |
88 | </tr> |
89 | <tr bgcolor="#ffffff" valign="top"> |
89 | <tr bgcolor="#ffffff" valign="top"> |
90 | <td> |
90 | <td> |
Line 110... | Line 110... | ||
110 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Width of tooltip border', BORDERWIDTH, 5);">BORDERWIDTH</a></tt> |
110 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Width of tooltip border', BORDERWIDTH, 5);">BORDERWIDTH</a></tt> |
111 | </td> |
111 | </td> |
112 | <td> |
112 | <td> |
113 | Width of tooltip border. |
113 | Width of tooltip border. |
114 | Value: Integer ≥ 0. Default is 1. Use 0 for no border. |
114 | Value: Integer ≥ 0. Default is 1. Use 0 for no border. |
115 | <br>Example: |
115 | <br/>Example: |
116 | <br> |
116 | <br/> |
117 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', BORDERWIDTH, 2)"</font></tt> |
117 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', BORDERWIDTH, 2)"</font></tt> |
118 | </td> |
118 | </td> |
119 | </tr> |
119 | </tr> |
120 | <tr bgcolor="#ffffff" valign="top"> |
120 | <tr bgcolor="#ffffff" valign="top"> |
121 | <td align="right"> |
121 | <td align="right"> |
Line 123... | Line 123... | ||
123 | </td> |
123 | </td> |
124 | <td> |
124 | <td> |
125 | Centers the tooltip horizontally beneath (or above) the mousepointer. |
125 | Centers the tooltip horizontally beneath (or above) the mousepointer. |
126 | Value: true or false. |
126 | Value: true or false. |
127 | Consider that the tooltip is offset from the center by the value globally set in wz_tooltip.js (<tt>config. OffsetX</tt>), or as specified by the OFFSETX command. |
127 | Consider that the tooltip is offset from the center by the value globally set in wz_tooltip.js (<tt>config. OffsetX</tt>), or as specified by the OFFSETX command. |
128 | <br>Example: |
128 | <br/>Example: |
129 | <br> |
129 | <br/> |
130 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', CENTERMOUSE, true, OFFSETX, 0)"</font></tt> |
130 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', CENTERMOUSE, true, OFFSETX, 0)"</font></tt> |
131 | </td> |
131 | </td> |
132 | </tr> |
132 | </tr> |
133 | <tr bgcolor="#ffffff" valign="top"> |
133 | <tr bgcolor="#ffffff" valign="top"> |
134 | <td> |
134 | <td> |
Line 152... | Line 152... | ||
152 | <td> |
152 | <td> |
153 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered closebutton colors', CLOSEBTN, true, STICKY, true, CLOSEBTNCOLORS, ['#7799cc', '#ffaaaa', '#ffffff', '#ff0000']);">CLOSEBTNCOLORS</a></tt> |
153 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Altered closebutton colors', CLOSEBTN, true, STICKY, true, CLOSEBTNCOLORS, ['#7799cc', '#ffaaaa', '#ffffff', '#ff0000']);">CLOSEBTNCOLORS</a></tt> |
154 | </td> |
154 | </td> |
155 | <td> |
155 | <td> |
156 | Colors used for the closebutton. |
156 | Colors used for the closebutton. |
157 | <br> <br |
157 | <br/> <br/> |
158 | Value must be a comma-separated array of 4 color values. Each color in |
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 |
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. |
160 | brackets, see example below, since it's actually a single parameter. |
161 | The 4 colors have the following meanings: <br> |
161 | The 4 colors have the following meanings: <br/> |
162 | 1. Background color |
162 | 1. Background color |
163 | <br> |
163 | <br/> |
164 | 2. Text color |
164 | 2. Text color |
165 | <br> |
165 | <br/> |
166 | 3. Highlighted background, while the button is being hovered |
166 | 3. Highlighted background, while the button is being hovered |
167 | <br> |
167 | <br/> |
168 | 4. Hilighted text color, while the button is being hovered |
168 | 4. Hilighted text color, while the button is being hovered |
169 | <br> |
169 | <br/> |
170 | For each of these colors, you can also specify an empty string <tt>''</tt>, |
170 | For each of these colors, you can also specify an empty string <tt>''</tt>, |
171 | in which case the title background, or title text color, respectively, is used for that button state. |
171 | in which case the title background, or title text color, respectively, is used for that button state. |
172 | <br> <br> |
172 | <br/> <br/> |
173 | Example:<br> |
173 | Example:<br/> |
174 | <tt><font class="tt" size="2">Tip('Text', CLOSEBTN, true, CLOSEBTNCOLORS, ['', '#66ff66', 'white', '#00cc00'], STICKY, true)</font></tt> |
174 | <tt><font class="tt" size="2">Tip('Text', CLOSEBTN, true, CLOSEBTNCOLORS, ['', '#66ff66', 'white', '#00cc00'], STICKY, true)</font></tt> |
175 | <br> |
175 | <br/> |
176 | In this example, the first color value (background color) is an empty string. |
176 | In this example, the first color value (background color) is an empty string. |
177 | Therefore the closebutton inherits the titlebar background. |
177 | Therefore the closebutton inherits the titlebar background. |
178 | </td> |
178 | </td> |
179 | </tr> |
179 | </tr> |
180 | <tr bgcolor="#ffffff" valign="top"> |
180 | <tr bgcolor="#ffffff" valign="top"> |
Line 183... | Line 183... | ||
183 | </td> |
183 | </td> |
184 | <td> |
184 | <td> |
185 | Text in the closebutton. |
185 | Text in the closebutton. |
186 | Value must be enclosed with single quotes. |
186 | Value must be enclosed with single quotes. |
187 | Example: |
187 | Example: |
188 | <br> |
188 | <br/> |
189 | <tt><font class="tt" size="2">Tip('Tooltip text', CLOSEBTN, true, CLOSEBTNTEXT, 'Click Me', STICKY, true)</font></tt> |
189 | <tt><font class="tt" size="2">Tip('Tooltip text', CLOSEBTN, true, CLOSEBTNTEXT, 'Click Me', STICKY, true)</font></tt> |
190 | <br> |
190 | <br/> |
191 | Globally preset in wz_tooltip.js is '&nbsp;X&nbsp;' - the |
191 | Globally preset in wz_tooltip.js is '&nbsp;X&nbsp;' - the |
192 | whitespace entities '&nbsp;' add some horizontal padding to the |
192 | whitespace entities '&nbsp;' add some horizontal padding to the |
193 | button. </td> |
193 | button. </td> |
194 | </tr> |
194 | </tr> |
195 | <tr bgcolor="#ffffff" valign="top"> |
195 | <tr bgcolor="#ffffff" valign="top"> |
Line 199... | Line 199... | ||
199 | Actually, this DIV was embedded right into the HTML of the document, |
199 | Actually, this DIV was embedded right into the HTML of the document, |
200 | but it has been temporarily converted to a tooltip. </div> |
200 | but it has been temporarily converted to a tooltip. </div> |
201 | </td> |
201 | </td> |
202 | <td> |
202 | <td> |
203 | COPYCONTENT has only effect on tooltips created with <tt>TagToTip()</tt>, that is, if an HTML element is to be converted to a tooltip. |
203 | COPYCONTENT has only effect on tooltips created with <tt>TagToTip()</tt>, that is, if an HTML element is to be converted to a tooltip. |
204 | <br> |
204 | <br/> |
205 | Value: true, false. |
205 | Value: true, false. |
206 | <br> |
206 | <br/> |
207 | If true (this is the default behaviour preset in wz_tooltip.js), just a |
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 |
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 |
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 |
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 |
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 |
212 | tooltip contains a form with inputs, their current user input will be |
213 | maintained even while the tooltip is not displayed. <br> |
213 | maintained even while the tooltip is not displayed. <br/> |
214 | 2.) The tooltip inherits the style properties of the HTML element. |
214 | 2.) The tooltip inherits the style properties of the HTML element. |
215 | <br> |
215 | <br/> |
216 | Example how to convert an HTML element entirely to a tooltip, by applying COPYCONTENT with the value <tt>false</tt>: |
216 | Example how to convert an HTML element entirely to a tooltip, by applying COPYCONTENT with the value <tt>false</tt>: |
217 | <br> |
217 | <br/> |
218 | <tt><font class="tt" size="2">TagToTip('SomeID', COPYCONTENT, false, BORDERWIDTH, 0, PADDING, 0)</font></tt> |
218 | <tt><font class="tt" size="2">TagToTip('SomeID', COPYCONTENT, false, BORDERWIDTH, 0, PADDING, 0)</font></tt> |
219 | <br> |
219 | <br/> |
220 | Moreover, this example turns off the native tooltip border |
220 | Moreover, this example turns off the native tooltip border |
221 | (BORDERWIDTH, 0), and sets the native tooltip padding to zero, so |
221 | (BORDERWIDTH, 0), and sets the native tooltip padding to zero, so |
222 | only the padding and border defined for the HTML element itself are |
222 | only the padding and border defined for the HTML element itself are |
223 | displayed. </td> |
223 | displayed. </td> |
224 | </tr> |
224 | </tr> |
225 | <tr bgcolor="#ffffff" valign="top"> |
225 | <tr bgcolor="#ffffff" valign="top"> |
226 | <td> |
226 | <td> |
227 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Delay of 1000 ms until the tooltip shows up.<br><br |
227 | <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 "GLOBAL TOOLTIP CONFIGURATION") 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></tt> |
228 | </td> |
228 | </td> |
229 | <td> |
229 | <td> |
230 | Tooltip shows up after the specified timeout, in milliseconds. |
230 | Tooltip shows up after the specified timeout, in milliseconds. |
231 | A behavior similar to OS based tooltips. |
231 | A behavior similar to OS based tooltips. |
232 | <br> |
232 | <br/> |
233 | Value: |
233 | Value: |
234 | Integer ≥ 0. Use 0 for no delay. |
234 | Integer ≥ 0. Use 0 for no delay. |
235 | In wz_tooltip.js preset and recommended is 400. |
235 | In wz_tooltip.js preset and recommended is 400. |
236 | <br>Example: |
236 | <br/>Example: |
237 | <br> |
237 | <br/> |
238 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', DELAY, 1000)"</font></tt> |
238 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', DELAY, 1000)"</font></tt> |
239 | </td> |
239 | </td> |
240 | </tr> |
240 | </tr> |
241 | <tr bgcolor="#ffffff" valign="top"> |
241 | <tr bgcolor="#ffffff" valign="top"> |
242 | <td> |
242 | <td> |
Line 244... | Line 244... | ||
244 | </td> |
244 | </td> |
245 | <td> |
245 | <td> |
246 | Time span, in milliseconds, until the tooltip will be hidden, |
246 | Time span, in milliseconds, until the tooltip will be hidden, |
247 | even if the <tt>STICKY</tt> command has been applied, |
247 | even if the <tt>STICKY</tt> command has been applied, |
248 | or even if the mouse is still on the HTML element that has triggered the tooltip. |
248 | or even if the mouse is still on the HTML element that has triggered the tooltip. |
249 | <br> |
249 | <br/> |
250 | Value: |
250 | Value: |
251 | Integer ≥ 0. |
251 | Integer ≥ 0. |
252 | Use 0 for no limitation (this is the default) |
252 | Use 0 for no limitation (this is the default) |
253 | </td> |
253 | </td> |
254 | </tr> |
254 | </tr> |
Line 258... | Line 258... | ||
258 | </td> |
258 | </td> |
259 | <td> |
259 | <td> |
260 | Fade-in animation. |
260 | Fade-in animation. |
261 | The value (integer ≥ 0) specifies the duration of the animation, in milliseconds. |
261 | The value (integer ≥ 0) specifies the duration of the animation, in milliseconds. |
262 | 0 for no animation. |
262 | 0 for no animation. |
263 | <br> <br> |
263 | <br/> <br/> |
264 | Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror. |
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. |
265 | These fall back to normal, non-animated behaviour. |
266 | </td> |
266 | </td> |
267 | </tr> |
267 | </tr> |
268 | <tr bgcolor="#ffffff" valign="top"> |
268 | <tr bgcolor="#ffffff" valign="top"> |
Line 271... | Line 271... | ||
271 | </td> |
271 | </td> |
272 | <td> |
272 | <td> |
273 | Fade-out animation. |
273 | Fade-out animation. |
274 | The value (integer ≥ 0) specifies the duration of the animation, in milliseconds. |
274 | The value (integer ≥ 0) specifies the duration of the animation, in milliseconds. |
275 | 0 for no animation. |
275 | 0 for no animation. |
276 | <br> <br> |
276 | <br/> <br/> |
277 | Recommended: combine with |
277 | Recommended: combine with |
278 | <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></tt>. |
278 | <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></tt>. |
279 | <br> <br> |
279 | <br/> <br/> |
280 | Not supported in Opera prior to v.9.0, old versions of Safari, some versions of Konqueror. |
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. |
281 | These fall back to normal, non-animated behaviour. |
282 | </td> |
282 | </td> |
283 | </tr> |
283 | </tr> |
284 | <tr bgcolor="#ffffff" valign="top"> |
284 | <tr bgcolor="#ffffff" valign="top"> |
Line 286... | Line 286... | ||
286 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Tooltip at fixed position', FIX, FixCalcXY(this));">FIX</a></tt> |
286 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Tooltip at fixed position', FIX, FixCalcXY(this));">FIX</a></tt> |
287 | </td> |
287 | </td> |
288 | <td> |
288 | <td> |
289 | Shows the tooltip at the fixed coordinates [x, y]. |
289 | Shows the tooltip at the fixed coordinates [x, y]. |
290 | Value: Square-bracketed array of two integers. |
290 | Value: Square-bracketed array of two integers. |
291 | Example:<br> |
291 | Example:<br/> |
292 | <tt>onmouseover="Tip('Some text', FIX, [230, 874])"</tt> |
292 | <tt>onmouseover="Tip('Some text', FIX, [230, 874])"</tt> |
293 | <br> |
293 | <br/> |
294 | You can also call function(s) defined elsewhere that calculate the coordinates dynamically: |
294 | You can also call function(s) defined elsewhere that calculate the coordinates dynamically: |
295 | <br> |
295 | <br/> |
296 | <tt>onmouseover="Tip('Text', FIX, [CalcFixX(), CalcFixY()], BORDERWIDTH, 2)"</tt> |
296 | <tt>onmouseover="Tip('Text', FIX, [CalcFixX(), CalcFixY()], BORDERWIDTH, 2)"</tt> |
297 | <br> |
297 | <br/> |
298 | or |
298 | or |
299 | <br> |
299 | <br/> |
300 | <tt>onmouseover="Tip('Text', FIX, CalcFixXY(), ABOVE, true)"</tt> |
300 | <tt>onmouseover="Tip('Text', FIX, CalcFixXY(), ABOVE, true)"</tt> |
301 | <br> |
301 | <br/> |
302 | In the latter example, the function CalcFixXY() must return an array containing the two numbers. |
302 | In the latter example, the function CalcFixXY() must return an array containing the two numbers. |
303 | </td> |
303 | </td> |
304 | </tr> |
304 | </tr> |
305 | <tr bgcolor="#ffffff" valign="top"> |
305 | <tr bgcolor="#ffffff" valign="top"> |
306 | <td> |
306 | <td> |
307 | <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></tt> |
307 | <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></tt> |
308 | </td> |
308 | </td> |
309 | <td> |
309 | <td> |
310 | The tooltip follows the movements of the mouse. |
310 | The tooltip follows the movements of the mouse. |
311 | Value: true, false. Default: true. |
311 | Value: true, false. Default: true. |
312 | <br> <br> |
312 | <br/> <br/> |
313 | When turning this off by applying the value false, |
313 | When turning this off by applying the value false, |
314 | the tooltip behaves like OS-based tooltips which don't follow the mouse. |
314 | the tooltip behaves like OS-based tooltips which don't follow the mouse. |
315 | </td> |
315 | </td> |
316 | </tr> |
316 | </tr> |
317 | <tr bgcolor="#ffffff" valign="top"> |
317 | <tr bgcolor="#ffffff" valign="top"> |
Line 327... | Line 327... | ||
327 | <td> |
327 | <td> |
328 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Changed font face', FONTFACE, 'Courier New, Courier, mono');">FONTFACE</a></tt> |
328 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Changed font face', FONTFACE, 'Courier New, Courier, mono');">FONTFACE</a></tt> |
329 | </td> |
329 | </td> |
330 | <td> |
330 | <td> |
331 | Font face (font family). |
331 | Font face (font family). |
332 | <br> |
332 | <br/> |
333 | Value: |
333 | Value: |
334 | As you'd specify it in HTML or CSS, enclosed with single quotes, e.g. |
334 | As you'd specify it in HTML or CSS, enclosed with single quotes, e.g. |
335 | <tt>Tip('Some text', FONTFACE, 'Arial, Helvetica, sans-serif', FONTSIZE, '12pt')</tt> |
335 | <tt>Tip('Some text', FONTFACE, 'Arial, Helvetica, sans-serif', FONTSIZE, '12pt')</tt> |
336 | </td> |
336 | </td> |
337 | </tr> |
337 | </tr> |
Line 359... | Line 359... | ||
359 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('On the other side', LEFT, true);">LEFT</a></tt> |
359 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('On the other side', LEFT, true);">LEFT</a></tt> |
360 | </td> |
360 | </td> |
361 | <td> |
361 | <td> |
362 | Tooltip positioned on the left side of the mousepointer. |
362 | Tooltip positioned on the left side of the mousepointer. |
363 | Value: true, false. |
363 | Value: true, false. |
364 | <br> |
364 | <br/> |
365 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('LEFT and ABOVE combined...', LEFT, true, ABOVE, true);">LEFT and ABOVE commands combined</a></tt>. |
365 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('LEFT and ABOVE combined...', LEFT, true, ABOVE, true);">LEFT and ABOVE commands combined</a></tt>. |
366 | <br>Example: |
366 | <br/>Example: |
367 | <br> |
367 | <br/> |
368 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', LEFT, true, ABOVE, true)"</font></tt> |
368 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', LEFT, true, ABOVE, true)"</font></tt> |
369 | </td> |
369 | </td> |
370 | </tr> |
370 | </tr> |
371 | <tr bgcolor="#ffffff" valign="top"> |
371 | <tr bgcolor="#ffffff" valign="top"> |
372 | <td> |
372 | <td> |
Line 391... | Line 391... | ||
391 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('A semi-transparent Tooltip', OPACITY, 70, PADDING, 14);">OPACITY</a></tt> |
391 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('A semi-transparent Tooltip', OPACITY, 70, PADDING, 14);">OPACITY</a></tt> |
392 | </td> |
392 | </td> |
393 | <td> |
393 | <td> |
394 | Transparency of tooltip. |
394 | Transparency of tooltip. |
395 | Value: Integer between 0 (fully transparent) and 100 (opaque, no transparency). |
395 | Value: Integer between 0 (fully transparent) and 100 (opaque, no transparency). |
396 | <br> <br> |
396 | <br/> <br/> |
397 | Opacity is the opposite of transparency, i.e.<br> |
397 | Opacity is the opposite of transparency, i.e.<br/> |
398 | opacity = 100 - transparency (in percent).<br> |
398 | opacity = 100 - transparency (in percent).<br/> |
399 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('<img src=../images/dragdrop/fateba_fi.jpg width=130 height=103><br |
399 | <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></tt> |
400 | with image (taken on my 9000-km / 5500-miles recumbent bicycle trip |
400 | with image (taken on my 9000-km / 5500-miles recumbent bicycle trip |
401 | Hamburg-Northcape-Munich), shadow via SHADOW command, content centered |
401 | Hamburg-Northcape-Munich), shadow via SHADOW command, content centered |
402 | using TEXTALIGN, background image via BGIMG and animation via FADEIN |
402 | using TEXTALIGN, background image via BGIMG and animation via FADEIN |
403 | and FADEOUT commands. <br> <br> |
403 | and FADEOUT commands. <br/> <br/> |
404 | Not supported in Opera prior to v.9.0, old versions of Safari and some versions of Konqueror. |
404 | Not supported in Opera prior to v.9.0, old versions of Safari and some versions of Konqueror. |
405 | </td> |
405 | </td> |
406 | </tr> |
406 | </tr> |
407 | <tr bgcolor="#ffffff" valign="top"> |
407 | <tr bgcolor="#ffffff" valign="top"> |
408 | <td> |
408 | <td> |
Line 422... | Line 422... | ||
422 | Value: true, false |
422 | Value: true, false |
423 | </td> |
423 | </td> |
424 | </tr> |
424 | </tr> |
425 | <tr bgcolor="#ffffff" valign="top"> |
425 | <tr bgcolor="#ffffff" valign="top"> |
426 | <td> |
426 | <td> |
427 | <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></tt> |
427 | <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></tt> |
428 | <!--br> |
428 | <!--br> |
429 | 429 | ||
430 | <form> <select><option>aaa</option><option>bbb</option><option>ccc</option></select></form--> |
430 | <form> <select><option>aaa</option><option>bbb</option><option>ccc</option></select></form--> |
431 | </td> |
431 | </td> |
432 | <td> |
432 | <td> |
433 | Shadow color. |
433 | Shadow color. |
434 | Value: HTML color, in single quotes. |
434 | Value: HTML color, in single quotes. |
435 | <br>Example: |
435 | <br/>Example: |
436 | <br> |
436 | <br/> |
437 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', SHADOW, true, SHADOWCOLOR, '#dd99aa')"</font></tt> |
437 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', SHADOW, true, SHADOWCOLOR, '#dd99aa')"</font></tt> |
438 | </td> |
438 | </td> |
439 | </tr> |
439 | </tr> |
440 | <tr bgcolor="#ffffff" valign="top"> |
440 | <tr bgcolor="#ffffff" valign="top"> |
441 | <td> |
441 | <td> |
442 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Increased shadow width', SHADOW, true, SHADOWWIDTH, 10, PADDING, 8);">SHADOWWIDTH</a></tt> |
442 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('Increased shadow width', SHADOW, true, SHADOWWIDTH, 10, PADDING, 8);">SHADOWWIDTH</a></tt> |
443 | </td> |
443 | </td> |
444 | <td> |
444 | <td> |
445 | Shadow width (offset). |
445 | Shadow width (offset). |
446 | Value: Integer ≥ 0. |
446 | Value: Integer ≥ 0. |
447 | <br>Example: |
447 | <br/>Example: |
448 | <br> |
448 | <br/> |
449 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', SHADOW, true, SHADOWWIDTH, 7)"</font></tt> |
449 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', SHADOW, true, SHADOWWIDTH, 7)"</font></tt> |
450 | </td> |
450 | </td> |
451 | </tr> |
451 | </tr> |
452 | <tr bgcolor="#ffffff" valign="top"> |
452 | <tr bgcolor="#ffffff" valign="top"> |
453 | <td> |
453 | <td> |
454 | <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></tt> |
454 | <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></tt> |
455 | </td> |
455 | </td> |
456 | <td> |
456 | <td> |
457 | The tooltip stays fixed at its initial position until another tooltip pops up. |
457 | The tooltip stays fixed at its initial position until another tooltip pops up. |
458 | Value: true, false. |
458 | Value: true, false. |
459 | <br> <br> |
459 | <br/> <br/> |
460 | With |
460 | With |
461 | <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></tt> |
461 | <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></tt> |
462 | you can enforce the tooltip to disappear after a certain time span. |
462 | you can enforce the tooltip to disappear after a certain time span. |
463 | </td> |
463 | </td> |
464 | </tr> |
464 | </tr> |
465 | <tr bgcolor="#ffffff" valign="top"> |
465 | <tr bgcolor="#ffffff" valign="top"> |
466 | <td> |
466 | <td> |
467 | <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></tt> |
467 | <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></tt> |
468 | </td> |
468 | </td> |
469 | <td> |
469 | <td> |
470 | Aligns the text in the body of the tooltip. |
470 | Aligns the text in the body of the tooltip. |
471 | Value: 'right', 'center', |
471 | Value: 'right', 'center', |
472 | <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></tt> |
472 | <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></tt> |
473 | or 'left'. |
473 | or 'left'. |
474 | <br>Example: |
474 | <br/>Example: |
475 | <br> |
475 | <br/> |
476 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', TEXTALIGN, 'right')"</font></tt> |
476 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', TEXTALIGN, 'right')"</font></tt> |
477 | </td> |
477 | </td> |
478 | </tr> |
478 | </tr> |
479 | <tr bgcolor="#ffffff" valign="top"> |
479 | <tr bgcolor="#ffffff" valign="top"> |
480 | <td> |
480 | <td> |
Line 522... | Line 522... | ||
522 | </td> |
522 | </td> |
523 | <td> |
523 | <td> |
524 | Font face for title text. |
524 | Font face for title text. |
525 | Value: Like in HTML or CSS. Enclosed with single quotes. |
525 | Value: Like in HTML or CSS. Enclosed with single quotes. |
526 | If the value is an empty string <tt>''</tt>, the tooltip body font, in boldified form, is used (this is the default). |
526 | If the value is an empty string <tt>''</tt>, the tooltip body font, in boldified form, is used (this is the default). |
527 | <br> |
527 | <br/> |
528 | Example: |
528 | Example: |
529 | <br> |
529 | <br/> |
530 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', TITLE, 'Some Title', TITLEFONTFACE, 'Verdana,sans-serif')"</font></tt> |
530 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('Some text', TITLE, 'Some Title', TITLEFONTFACE, 'Verdana,sans-serif')"</font></tt> |
531 | <br> |
531 | <br/> |
532 | </td> |
532 | </td> |
533 | </tr> |
533 | </tr> |
534 | <tr bgcolor="#ffffff" valign="top"> |
534 | <tr bgcolor="#ffffff" valign="top"> |
535 | <td> |
535 | <td> |
536 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTSIZE, \'18pt\'', TITLE, 'Big Title', TITLEFONTSIZE, '18pt');">TITLEFONTSIZE</a></tt> |
536 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTSIZE, \'18pt\'', TITLE, 'Big Title', TITLEFONTSIZE, '18pt');">TITLEFONTSIZE</a></tt> |
Line 548... | Line 548... | ||
548 | </td> |
548 | </td> |
549 | <td> |
549 | <td> |
550 | Width of tooltip. |
550 | Width of tooltip. |
551 | Value: Integer ≥ 0. |
551 | Value: Integer ≥ 0. |
552 | If 0 (the default), the width is automatically adapted to the content of the tooltip. |
552 | If 0 (the default), the width is automatically adapted to the content of the tooltip. |
553 | <br> <br> |
553 | <br/> <br/> |
554 | Note that the tooltips follow the W3C box model, |
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, |
555 | which means that the specified width applies to the actual content of the tooltip, |
556 | excluding padding (see PADDING command), border and shadow. |
556 | excluding padding (see PADDING command), border and shadow. |
557 | </td> |
557 | </td> |
558 | </tr> |
558 | </tr> |
559 | </tbody></table> |
559 | </tbody></table> |
560 | </td> |
560 | </td> |
561 | </tr> |
561 | </tr> |
562 | </tbody></table> |
562 | </tbody></table> |
563 | </td> |
563 | </td> |
564 | <td width="50"><br></td> |
564 | <td width="50"><br/></td> |
565 | </tr> |
565 | </tr> |
566 | </tbody></table> |
566 | </tbody></table> |
567 | 567 |