Extended Tooltip3. Defining Tips |
|
Join the DiscussionMore of this FeatureBy incorporating the code, we have made the Javascript tooltip facility available to use on our page. To actually use Javascript tooltips we next need to define the content of each tooltip that we want to use with our page. We do this by coding each tooltip within <div> tags immediately after the <body> tag within the page that will use it. For example the tooltips I used as an example were defined using the following code:
<div id="t1"
class="tip">This is a Javascript
Tooltip</div>
Using class="tip" with each entry
defines the content of the <div> tag as being a
tooltip because it associates it with the tip class
that we defined in the cascading stylesheet. The
stylesheet defines the tip as using absolute
positioning so that its location on the page will not
be affected by its location within the code and the
visibility is set to hidden so that it will not
be displayed on the page until something happens to
alter that visibility. We define an unique id
for each tooltip so that we can reference which tip we
want to display in the code that we add to the links.
You can use whatever names that you want for your
tooltip ids as long as they are unique. As you can see
from the second example we can easily include tables,
images, javascripts, etc. into the tooltips that we
intend to display.
<div id="t2" class="tip"><table align="center" width="250" border="0" cellspacing="0" cellpadding="5" bgcolor="#008cff"><tr><td valign="bottom" align="center"> <img src="graphics/head.gif" width="250" height="90" border="0" alt="" /></td></tr><tr><td valign="bottom" align="center">Please visit my site</td></tr></table></div> Now that you have created your tips the final step is to create links on your page and attach the tooptips to them. Note that this script and the associated description of how to use it are copied from the "Ask Felgall" website with the permission of the copyright owner. |
Explore JavaScript
Must Reads
About.com Special Features
Holiday Central
What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >
Family Tech Center
Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >
©2009 About.com, a part of The New York Times Company.
All rights reserved.