1265 |
jp_milcent |
1 |
$Id: README,v 1.1 2007-03-16 12:39:35 jp_milcent Exp $
|
|
|
2 |
|
|
|
3 |
Project: DOM Tooltip
|
|
|
4 |
Maintainer: Dan Allen (Mojavelinux) <dan.allen@mojavelinux.com>
|
|
|
5 |
Contributors:
|
|
|
6 |
Josh Gross (JPortalHome) <josh@jportalhome.com>
|
|
|
7 |
Jason Rust (CodeJanitor) <jason@rustyparts.com>
|
|
|
8 |
License: Apache 2.0
|
|
|
9 |
|
|
|
10 |
What is it?
|
|
|
11 |
-----------
|
|
|
12 |
This javascript library will allow you to have dynamic and configurable
|
|
|
13 |
tooltips on your html pages. There are several other tooltip libraries on the
|
|
|
14 |
web, but you will find that this library is very complete and stable. It
|
|
|
15 |
includes support for all the modern browsers and behaves in a consistent way
|
|
|
16 |
across these platforms. This library does not support Netscape 4. Netscape 4
|
|
|
17 |
is no longer an acceptable browser and it is time to move forward. That is why
|
|
|
18 |
I prefixed the project title with DOM. If your browser doesn't support the DOM
|
|
|
19 |
standard, then this library won't work.
|
|
|
20 |
|
|
|
21 |
How does it work?
|
|
|
22 |
-----------------
|
|
|
23 |
This library supports Gecko (Mozilla/Netscape6+,Firefox, etc), IE 5.5+, IE on
|
|
|
24 |
Mac, Safari, Konqueror and Opera 7 (which includes full DOM and CSS2 support).
|
|
|
25 |
The tooltips are configured through class definitions in your stylesheet and
|
|
|
26 |
the rest is up to javascript. The tooltips may consist of two parts, the
|
|
|
27 |
caption and the content. The caption is optional. The tips can either be
|
|
|
28 |
greasy, sticky, or velcro. Greasy means that they move around when you move
|
|
|
29 |
the mouse around and go away when you leave the element. Sticky means that they
|
|
|
30 |
stick around after you leave the element and are otherwise stationary. Velcro
|
|
|
31 |
tips disappear after a mouseout occurs on the tip itself. The tooltips also
|
|
|
32 |
have directionality, so you can have tips that are 'northeast', 'northwest',
|
|
|
33 |
'southeast' or 'southwest' of the mouse.
|
|
|
34 |
|
|
|
35 |
Be sure to include the file 'domLib.js' whereever you use 'domTT.js' and if you
|
|
|
36 |
want to have draggable tips or opacity fading, include the 'domTT_drag.js' and
|
|
|
37 |
'fadomatic.js' files as well. **Some of these libraries are available under the
|
|
|
38 |
domLib project.** Please see the HOWTO.html for details on how to use the
|
|
|
39 |
library and the options that are available.
|
|
|
40 |
|
|
|
41 |
Why is this program so big?
|
|
|
42 |
---------------------------
|
|
|
43 |
Partly because it is feature rich and thus there is lots of code, partly
|
|
|
44 |
because we try to use comments where ever necessary to clarify issues, and
|
|
|
45 |
partly because our coding style is one which makes liberal use of whitespace.
|
|
|
46 |
However, to save your users the trouble of downloading 50k of JavaScript every
|
|
|
47 |
time they come to your page you can use Douglas Crockford's excellent jsmin
|
|
|
48 |
program to strip all non-essentials from the code, reducing it's size by as
|
|
|
49 |
much as 50%. This program has been verified to work with his program, located at:
|
|
|
50 |
http://www.crockford.com/javascript/jsmin.html
|
|
|
51 |
An example usage would be:
|
|
|
52 |
bash# ./jsmin domTT.js domTT_min.js \
|
|
|
53 |
"domTT is Copyright Dan Allen (dan.allen@mojavelinux.com) (2002 - 2005). Licensed under the Apache 2.0 license"
|
|
|
54 |
|
|
|
55 |
Anything I should know?
|
|
|
56 |
-----------------------
|
|
|
57 |
Additionally, this tooltip library autodetects select boxes in IE and the
|
|
|
58 |
scrollbar on multiple selects in mozilla (the only issue mozilla has) and
|
|
|
59 |
HIDES them whenever the tooltip collides with them. Hence, it has full
|
|
|
60 |
collision detection with components which cannot use the zIndex propery!!
|
|
|
61 |
|
|
|
62 |
In order for it to work correctly you'll want to follow the example stylesheet
|
|
|
63 |
pretty closely. It has been crafted to work well on all the supported
|
|
|
64 |
browsers. Note the body { margin: 0; } style which is needed if you want it to
|
|
|
65 |
work decently on Mac IE and Opera. (According the W3C standard, a body cannot
|
|
|
66 |
have a margin anyway).
|
|
|
67 |
|
|
|
68 |
By default, the library accounts for the size of the mouse when the tip is
|
|
|
69 |
in one of the two southern positions. If you need to turn off this correction
|
|
|
70 |
on a given tip, set the option 'clearMouse' to false. If the size of the mouse
|
|
|
71 |
needs to be adjusted, overwrite the global variable domTT_mouseHeight.
|
|
|
72 |
|
|
|
73 |
In 0.7.1, the hiding of flash animations was added for those browsers that
|
|
|
74 |
cannot put html over top of flash. However, there are a couple of
|
|
|
75 |
requirements. First, the syntax that must be used is:
|
|
|
76 |
|
|
|
77 |
<object
|
|
|
78 |
type="application/x-shockwave-flash"
|
|
|
79 |
data="animation.swf"
|
|
|
80 |
width="450px"
|
|
|
81 |
height="250px"
|
|
|
82 |
pluginspage="http://www.macromedia.com/go/getflashplayer">
|
|
|
83 |
<param name="movie" value="animation.swf" />
|
|
|
84 |
<param name="wmode" value="opaque" />
|
|
|
85 |
...alternate (non-flash) html here!...
|
|
|
86 |
</object>
|
|
|
87 |
|
|
|
88 |
If you use the object+embed syntax, the flash will not be properly detected.
|
|
|
89 |
The second requirement is that the flash must be included in an element with a
|
|
|
90 |
position of either absolute or relative. If it is not, the flash animation
|
|
|
91 |
will be relocated in the DOM and therefore will not be aware of its location on
|
|
|
92 |
the page, making collision detection worthless.
|
|
|
93 |
|
|
|
94 |
Why did you write it?
|
|
|
95 |
---------------------
|
|
|
96 |
The reason I wrote this library is because I wanted a library which used 100%
|
|
|
97 |
DOM to do the tooltips, was easy to configure, was fast, and which was freely
|
|
|
98 |
distributable. You may use this library in personal or company, open source or
|
|
|
99 |
proprietry projects. I wrote it for you, so enjoy it. All I ask is that you
|
|
|
100 |
spread the word and please give me credit by leaving in my comments. If you
|
|
|
101 |
do make patches, please let me know about them on my forums. Viva Open Source!!
|
|
|
102 |
|
|
|
103 |
Important Changes in 0.7.1
|
|
|
104 |
--------------------------
|
|
|
105 |
Fading library is now fadomatic.js, so be sure to change your include
|
|
|
106 |
when using the fade feature. This is a third party library developed
|
|
|
107 |
by fadomatic@chimpen.com. You can find this library at the following URL:
|
|
|
108 |
|
|
|
109 |
http://chimpen.com/fadomatic
|
|
|
110 |
|
|
|
111 |
The global setting domTT_classPrefix was changed to domTT_styleClass and the
|
|
|
112 |
equivalent options without the domTT_ prefix in the domTT_activate() function
|
|
|
113 |
call have been changed.
|
|
|
114 |
|
|
|
115 |
Important Changes in 0.70
|
|
|
116 |
-----------------------------
|
|
|
117 |
IE 5.0 is no longer supported because its DOM implementation is just too
|
|
|
118 |
crippled. Many of the complaints about the positioning of the tips and
|
|
|
119 |
the screen edge detecting are now fixed.
|
|
|
120 |
|
|
|
121 |
Important API Changes in 0.60
|
|
|
122 |
------------------------------
|
|
|
123 |
The release is 0.60 and it introduced several significant changes over the
|
|
|
124 |
0.55 release. Several of the options have changed names. The following is a
|
|
|
125 |
list:
|
|
|
126 |
|
|
|
127 |
'status' -> 'statusText'
|
|
|
128 |
'close' -> 'closeAction'
|
|
|
129 |
'prefix' -> 'classPrefix'
|
|
|
130 |
'id' -> *no longer an option*
|
|
|
131 |
|
|
|
132 |
There is also a new option 'trail' which is used in place of mousemove. Do not
|
|
|
133 |
use domTT_activate() in the onmousemove event handler any longer!!! It was far
|
|
|
134 |
too slow to parse the same options all over again from onmouseover, so now just
|
|
|
135 |
specify the domTT_activate() in onmouseover with the option trail.
|
|
|
136 |
|
|
|
137 |
Also to note, the functions domTT_true() and domTT_false() have been changed to
|
|
|
138 |
makeTrue() and makeFalse() respectively to make them more understandable.
|
|
|
139 |
|
|
|
140 |
Be sure to include the file 'domLib.js' whereever you use 'domTT.js'
|
|
|
141 |
and if you want to have draggable tips or opacity fading, include the
|
|
|
142 |
'domTT_drag.js' and 'fadomatic.js' files as well.
|