| 1265 |
jp_milcent |
1 |
<html>
|
|
|
2 |
<head>
|
|
|
3 |
<title>DOM Tooltip Library :: HOWTO</title>
|
|
|
4 |
<style type="text/css">
|
|
|
5 |
body
|
|
|
6 |
{
|
|
|
7 |
margin: 0;
|
|
|
8 |
padding: 10px;
|
|
|
9 |
font-size: .85em;
|
|
|
10 |
line-height: 1.3em;
|
|
|
11 |
}
|
|
|
12 |
dl
|
|
|
13 |
{
|
|
|
14 |
margin-left: 10px;
|
|
|
15 |
}
|
|
|
16 |
dt
|
|
|
17 |
{
|
|
|
18 |
font-weight: bold;
|
|
|
19 |
}
|
|
|
20 |
</style>
|
|
|
21 |
</head>
|
|
|
22 |
<body>
|
|
|
23 |
<h1>DOM Tooltip Library HOWTO</h1>
|
|
|
24 |
<h3>Usage</h3>
|
|
|
25 |
<p>This library offers a variety of ways to enable custom tooltips. The standard way of creating a tooltip is to add the domTT_activate() call to one of the event handlers of the target element. Tips can also be created programatically, which can be used for popping up inline windows. Another option is to call the method domTT_replaceTitles(), which replaces all elements containing the class 'tooltip' and the title attribute with a custom tooltip on mouseover.</p>
|
|
|
26 |
<h3>Examples</h3>
|
|
|
27 |
<pre><a href="index.html" onmouseover="domTT_activate(this, event, 'content', 'My first tooltip', 'trail', true);">sample link</a></pre>
|
|
|
28 |
<h3>Options</h3>
|
|
|
29 |
<p>The only required option to create a tooltip is the 'content' option. Most of the options below have a default value which is held in a global variable. If the option is specified, it overrides the default. The options are summarized below.</p>
|
|
|
30 |
<dl>
|
|
|
31 |
<dt>caption [text|xhtml|DOM Node]</dt>
|
|
|
32 |
<dd>An auto-generated caption will be created if this text is present. <strong>Set this to <code>false</code> when creating a sticky tip to prevent the automatic caption with close link.</strong></dd>
|
|
|
33 |
|
|
|
34 |
<dt>content [text|xhtml|DOM Node|function] (required)</dt>
|
|
|
35 |
<dd>The main content of the tip, which may be XHTML text. Note that when using a function, it is only called when the tip is activated, so it is necessary to use 'closeMethod' of 'destroy' to redraw each time.</dd>
|
|
|
36 |
|
|
|
37 |
<dt>clearMouse [boolean]</dt>
|
|
|
38 |
<dd>This option flags whether the tip should attempt to avoid the mouse when the direction is south.</dd>
|
|
|
39 |
|
|
|
40 |
<dt>closeAction ['hide'|'destroy']</dt>
|
|
|
41 |
<dd>Determines if the tip should be destroyed (removed from DOM) or just hidden when deactivated. (If fading is used, hiding is forced)</dd>
|
|
|
42 |
|
|
|
43 |
<dt>closeLink [text|xhtml|DOM Node]</dt>
|
|
|
44 |
<dd>The text that should be used for the auto-generated close link used for sticky tips.</dd>
|
|
|
45 |
|
|
|
46 |
<dt>delay [ms]</dt>
|
|
|
47 |
<dd>Time in milliseconds before the tip appears.</dd>
|
|
|
48 |
|
|
|
49 |
<dt>direction ['southeast'|'southwest'|'northeast'|'northwest'|'north'|'south']</dt>
|
|
|
50 |
<dd>The position of the tip relative to the mouse.</dd>
|
|
|
51 |
|
|
|
52 |
<dt>draggable [boolean]</dt>
|
|
|
53 |
<dd>Determines of the sticky tooltip can be dragged.</dd>
|
|
|
54 |
|
|
|
55 |
<dt>fade ['in'|'out'|'neither'|'both']</dt>
|
|
|
56 |
<dd>Sets the alpha effect when the tip is created or destroyed.</dd>
|
|
|
57 |
|
|
|
58 |
<dt>fadeMax [0-100]</dt>
|
|
|
59 |
<dd>Sets the maximum alpha that should be used for the alpha effect. (Minimum is always 0, or invisible)</dd>
|
|
|
60 |
|
|
|
61 |
<dt>grid [px]</dt>
|
|
|
62 |
<dd>Snaps the trailing to a grid, so that the tip only moves after a set number of pixels.</dd>
|
|
|
63 |
|
|
|
64 |
<dt>id [string]</dt>
|
|
|
65 |
<dd>The XML id that should be assigned to the tip. Using this setting allows for external manipulation of the tip.</dd>
|
|
|
66 |
|
|
|
67 |
<dt>inframe [boolean]</dt>
|
|
|
68 |
<dd>Hints that the tooltip is inside an iframe, so that the tip can be manipulated from the parent frame.</dd>
|
|
|
69 |
|
|
|
70 |
<dt>lifetime [ms]</dt>
|
|
|
71 |
<dd>The duration of time before the tooltip is automatically terminated, as long as it is still activated.</dd>
|
|
|
72 |
|
|
|
73 |
<dt>offsetX [px]</dt>
|
|
|
74 |
<dd>The left-to-right offset from the event where the tip should be placed.</dd>
|
|
|
75 |
|
|
|
76 |
<dt>offsetY [px]</dt>
|
|
|
77 |
<dd>The top-to-bottom offset from the event where the tip should be placed.</dd>
|
|
|
78 |
|
|
|
79 |
<dt>parent [DOM Node]</dt>
|
|
|
80 |
<dd>The parent node on which the tip should be appended. Usually used for tips with a relative position.</dd>
|
|
|
81 |
|
|
|
82 |
<dt>position ['absolute'|'relative'|'fixed']</dt>
|
|
|
83 |
<dd>The style position of the tip. (In most cases, the position is 'absolute')</dd>
|
|
|
84 |
|
|
|
85 |
<dt>predefined [string]</dt>
|
|
|
86 |
<dd>A reference to a previously defined tooltip using domTT_addPredefined()</dd>
|
|
|
87 |
|
|
|
88 |
<dt>statusText [string]</dt>
|
|
|
89 |
<dd>Sets the text to be used in the statusbar when the tip is activated. <strong>If used with mouseover, it is necessary to wrap the domTT_activate() call in 'return domTT_true()'.</strong></dd>
|
|
|
90 |
|
|
|
91 |
<dt>styleClass [string]</dt>
|
|
|
92 |
<dd>The class that will be assigned to the tip. The contents of the tip is assigned the class 'content' and the caption of the tip is assigned the class 'caption'.</dd>
|
|
|
93 |
|
|
|
94 |
<dt>type ['greasy'|'sticky'|'velcro']</dt>
|
|
|
95 |
<dd>Sets the fate of the tip. A greasy tip disappears when a mouse out occurs on owner. A sticky tip stays active until explicitly destroyed (a caption is also forced). A velcro tip disappears when a mouse out occurs on the tip itself.</dd>
|
|
|
96 |
|
|
|
97 |
<dt>trail [true|false|'x'|'y']</dt>
|
|
|
98 |
<dd>On which axis the tip should be updated when the mouse moves. A value of true updates on both axes.</dd>
|
|
|
99 |
|
|
|
100 |
<dt>lazy [boolean]</dt>
|
|
|
101 |
<dd>Whether or not to enable a delay when updating the mouse position of a trailing tip (drunk tooltip).</dd>
|
|
|
102 |
|
|
|
103 |
<dt>width [px]</dt>
|
|
|
104 |
<dd>A manual width for the tip.</dd>
|
|
|
105 |
|
|
|
106 |
<dt>maxWidth [px]</dt>
|
|
|
107 |
<dd>A manual maximum width for the tip. (In Firefox, this is controlled by the max-width style of the element)</dd>
|
|
|
108 |
|
|
|
109 |
<dt>x [px]</dt>
|
|
|
110 |
<dd>The absolute x position to be used for the tip location. This can be a calculated value, such as 'this.offsetLeft + 5'.</dd>
|
|
|
111 |
|
|
|
112 |
<dt>y [px]</dt>
|
|
|
113 |
<dd>The absolute y position to be used for the tip location. This can be a calculated value, such as 'this.offsetTop + 5'.</dd>
|
|
|
114 |
|
|
|
115 |
</dl>
|
|
|
116 |
<h3>Function Reference</h3>
|
|
|
117 |
<p>The DOM tooltip library offers a handful of functions, prefixed with 'domTT_', to aid in manipulating the tooltips. The following is a reference of these function calls.</p>
|
|
|
118 |
<dl>
|
|
|
119 |
<dt>domTT_activate()</dt>
|
|
|
120 |
<dd>The primary method for activating a tooltip, typically placed in an event handler such as <code>onmouseover</code>. The first two arguments must always be <code>this</code> and <code>event</code>, respectively. These two variable capture the environment on which to act. The rest of the arguments alternate between option name and option value from the list above.</dd>
|
|
|
121 |
<dt>domTT_addPredefined()</dt>
|
|
|
122 |
<dd>For times when tooltip creation should be seperated from activation, this method can be used to prepare the tooltips. The first argument is a unique name for the configuration, and the rest of the arguments alternate between option name and option value from the list of options above. A preconfigured tip can be reused any number of times, and the activate call can override options in the predefined configuration. A typical activate call for a predefined tooltip looks like: <code>domTT_activate(this, event, 'predefined', 'mytip')</code></dd>
|
|
|
123 |
<dt>domTT_close()</dt>
|
|
|
124 |
<dd>A more flexible alternative to <code>domTT_deactivate()</code>, this function assists in immediately closing the tooltip. The argument can either be a child object of the tip, the tip id or the owner id. From within a tooltip, the call is typically: <code>domTT_close(this)</code></dd>
|
|
|
125 |
<dt>domTT_deactivate()</dt>
|
|
|
126 |
<dd>In most cases, this method is automatically registered on the target element when <code>domTT_activate()</code> is first called. However, it may be necessary to programmatically close a tooltip. In this case, this method can be used. It requires one parameter, which can be the ID of the tooltip, the ID of the target or the target object itself.</dd>
|
|
|
127 |
<dt>domTT_mouseout()</dt>
|
|
|
128 |
<dd>When a tooltip is activate, it automatically registers a mouseout handler to close to tooltip unless one already exists. If you intend to have a custom mouseout handler on the target that activates the tip, you <strong><u>must</u></strong> make a <strong><u>call</u></strong> to <strong><code>domTT_mouseout(this, event)</code></strong> from within your mouseout handler. Otherwise, the tooltip will never be deactivated!</dd>
|
|
|
129 |
<dt>domTT_update()</dt>
|
|
|
130 |
<dd>If you find that you need to update the contents or caption of a tooltip after it has been created, you will find this function convenient. You must specify a tooltip id, target id or target node and new text or XHTML content and it will be used to replace the content of the existing tooltip. The third parameter allows you to specify either 'content' or 'caption', though it is optional and 'content' is the default.</dd>
|
|
|
131 |
<dt>makeTrue()/makeFalse()</dt>
|
|
|
132 |
<dd>These methods are indended soley for coaxing the return value of an event handler. Of times, it is necessary to return either true or false to the event handler, regardless of what the function in the handler might return. These methods will guarantee that result. For instance, the <code>onclick</code> handler must return false for a link or else the browser will follow the target href. Conversely, the handler must return true or else the browser will stall. These methods just help to achieve the desired behavior.</dd>
|
|
|
133 |
</dl>
|
|
|
134 |
<h3>Global Settings</h3>
|
|
|
135 |
<p>All of the options above can be used a global settings by prepending the 'domTT_' prefix. These assignments are a good way to establish common behaviors for your tooltips on the webpage. A couple of additional settings are documented here. <em>Be sure to include your custom values below the point when the domTT library is included so that they override the default values.</em></p>
|
|
|
136 |
<dl>
|
|
|
137 |
<dt>domTT_oneOnly</dt>
|
|
|
138 |
<dd>Set to this <code>true</code> to allow only one active tip at a time. When a tooltip is created, it will deactivate the last opened tooltip. You can access the last opened tooltip using the global variable domTT_lastOpened</dd>
|
|
|
139 |
<dt>fading</dt>
|
|
|
140 |
<dd>In order to use the fading feature, you must include the library fadomatic.js in your web page. See examples #5.</dd>
|
|
|
141 |
<dt>dragging</dt>
|
|
|
142 |
<dd>In order to drag tooltips, you must include the library domTT_drag.js in your web page. See example #4.</dd>
|
|
|
143 |
<dt>domTT_useGlobalMousePosition</dt>
|
|
|
144 |
<dd>This setting will allow domTT to register an event handler on the document to track the position of the mouse. Registering this event allows the trailing feature to behave more smoothly.</dd>
|
|
|
145 |
<dt>domTT_screenEdgeDetection</dt>
|
|
|
146 |
<dd>Enable the screen edge detection feature, which will prevent the tip from leaving the page. Setting this to <code>false</code> disables this feature.</dd>
|
|
|
147 |
<dt>domTT_screenEdgePadding</dt>
|
|
|
148 |
<dd>When using screen edge detection, this setting specifies how close to the edge the tip should be allowed to travel.</dd>
|
|
|
149 |
<dt>domTT_detectCollisions</dt>
|
|
|
150 |
<dd>If you would rather not having the select boxes and other interfering elements hidden when a visual collision is detected, you may turn off the functionality globally using this flag.</dd>
|
|
|
151 |
</dl>
|
|
|
152 |
<h3>Common Problems</h3>
|
|
|
153 |
<ul>
|
|
|
154 |
<li>If tips are not disappearing in low latency situations, use <code>onmouseover = domTT_deactivate(this.id);</code> to be sure it is discarded. (It seems, though, that a bug fix in 0.7.3 solved this problem.)</li>
|
|
|
155 |
<li>If the error 'operation aborted' is being thrown in IE, use the domTT_postponeActivation along with domTT_documentLoaded to prevent these types of page load problems.</li>
|
|
|
156 |
<li>To get dynamic updates on your tips using AJAX, you can either address the tip by its id, manipulate the node linked to the content, or use this domTT_update method. This point to remember is that the content is only processed when the tip is activated.</li>
|
|
|
157 |
<li>Disabled form fields do not have positions in the page. This prevents tooltips from being placed next to them. In order to use tooltips with form fields that are inactive, please use the onfocus="this.blur()" trick along with appropriate visual styling. In general, the disabled attribute causes other side-effects anyway.</li>
|
|
|
158 |
</ul>
|
|
|
159 |
</body>
|
|
|
160 |
</html>
|