CoolTip Logo

Robert E. Boughner
coolTips can be added to most webpages with a minimum of fuss.  This page will guide you through installing coolTip in a webpage, and will discuss some fundamental usage rules.

When you are done here, go back to the Documentation Home Page.  Then read the other pages to learn about all the specific commands and get advice about problem areas. 

You should learn to use coolTip in a simple environment.  Make a Trial Page and create a few coolTips that work, before you copy the code to your working pages.

Mouse here for some general notes

Getting Started  To install coolTip, you will download a single file, move it to your website, and add 2 new lines to each webpage.

The basic coolTip "core" file contains everything you need to get started, including 65 fundamental commands.

  • Another 70 commands are available for the more experienced user.  These advanced commands are contained in "plug-in" files, any of which can be separately downloaded and installed when and if you choose to use those "plug-in" commands.  Every page of documentation includes explicit instructions for downloading and installing any required plug-in files.
  • Don't worry about "plug-ins" now.
Downloading  First, download the core file.  Remember where you saved it.
  • Open the file ("cCore.js") in a text editor and read the headnotes and the License Agreement.  If you can't accept these conditions, promptly delete the file from your hard drive and move on to something else.  Good Bye.
  • Then, move the file ("cCore.js") to the same directory as your html pages, and upload it to your website.
  • The core file (and all the plug-ins) are also available zipped.  Go to the coolTip Home Page for links to zipped versions.
Set up your page  In your Trial Page, and in every page that will use coolTips, add two lines.

1.  Somewhere in the <head> section of the page, load the coolTip core file by inserting: Read Me

<head> . <script type="text/javascript" src="cCore.js"></script> . </head>

If your website is more complex, you might upload and install the coolTip files in some other directory.  That is easily handled using normal relative or absolute addressing.

<head> <script type="text/javascript" src="myJSdir/cCore.js"></script> -- or -- <script type="text/javascript" src="../myJSdir/cCore.js"></script> -- or -- <script type="text/javascript" src="http://mysite.com/JSdir/cCore.js">
</script> </head>

2.  At the top of the <body> section of the page, insert:  Read Me

<body> <div id="ctDiv" style="position: absolute; visibility: hidden; z-index: 1000;"></div> <!-- All the rest of your code --> </body>

More  Be sure that the FIRST FEW LINES of the page read: Read Me

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Commands
A coolTip is created by the function coolTip() which is called when the cursor passes over an anchor word or phrase in your html.  The argument list of coolTip() contains the text of the coolTip, followed by zero or more comma-separated TOKENS and Parameters, which represent Commands which control the appearance, position and behavior of the coolTip().
Make a coolTip
Select any anchor (link) on your page.  Read Me

<a href="http://www.anysite.com">Go to AnySite</a>

Add the call to coolTip in an "onmouseover" event.  You must also add the "onmouseout" event to close the coolTip when the cursor moves off the anchor.

<a href="http://www.anysite.com" onmouseover="return coolTip()" onmouseout="nd()" >Go to AnySite</a>

Add a quoted TEXT string as the first argument in coolTip().

<a href="http://www.anysite.com" onmouseover="return coolTip('This is the phrase in the coolTip')" onmouseout="nd()">Go to AnySite</a>

Add other TOKENS and Parameters after the TEXT, separated by commas, to gain better control over the coolTip().

<a href="http://www.anysite.com" onmouseover="return coolTip('This is the phrase in the coolTip', CAPTION,'Fancier',CAPCOLOR,'red',ABOVE,RELX,-20, FGCOLOR,'orange', BORDER,7,BGCOLOR,'lime' )" onmouseout="nd()">Go to AnySite</a>

Often, you will install a coolTip at an ANCHOR which does not have a real link to another webpage.  In that circumstance, use href="javascript:void(0)", which is nature's way of permitting the coolTip while making the click-on-the-link event totally benign.

<a href="javascript:void(0)" onmouseover="return coolTip('This is the phrase in the coolTip', CAPTION,'Fancier',CAPCOLOR,'red',ABOVE,RELX,-20, FGCOLOR,'orange', BORDER,7,BGCOLOR,'lime' )" onmouseout="nd()">DON'T GO ANYWHERE</a>

  • For most of the remainder of these documentation pages, we will use href="javascript:void(0)".  Just remember that a real webpage link can be substituted, if that is appropriate.
  • You may not have noticed, but in all the prior examples, we showed an URL of "www.anysite.com", but nothing happened if you clicked the link.  That is because we cheated a little.  The actual href in the coolTip call is href="javascript:void(0)", and so the click-on-the-link was neutralized.
Parameters
In the above example, you see both TOKENS and Parameters. The TOKENS are always UPPER CASE words, and they may be included in the Argument List in any order (after the quoted TEXT, which is ALWAYS the first argument).

Some TOKENS (ex:ABOVE) are self-contained.

Other TOKENS require a Parameter to immediately follow them. (ex: BORDER,7, FGCOLOR,'orange')  Some TOKENS require more than one Parameter, and some permit a variable number of Parameters.  In this documentation, we will always tell you if a Parameter is needed, and how many are acceptable.

All TOKENS and their Parameters are separated by commas.

Defaults
Every Command has a built-in default value which is set when cCore.js (or a plug-in file) is loaded into the page  The default for every Command is listed in the documentation.  Some common defaults are:
  • The CoolTip is located BELOW and RIGHT of the cursor,
  • WIDTH of 200 pixels,
  • Black text over a light blue background, with 2 pixels of padding around the edge,
  • White lettering over a dark blue Caption Bar,
  • A border of 2 pixels.
Some Commands are TOGGLEs.  By default, they are either On or Off, and generally control the behavior of other Commands.

Defaults are routinely changed by the specific TOKENS and Parameters added into the coolTip argument list, as shown in the last example above.

Page Defaults
You will probably have many CoolTips on a page, and they might all use many of the same Commands and Parameters to achieve a uniform look and feel.  If so, you should identify those Commands and Parameters which are common to all the coolTips.
  • Place those common Commands and Parameters in the argument list of the function ctPageDefaults().  ctPageDefaults() uses exactly the same Commands, syntax and grammar as coolTip() uses (except that there is no TEXT argument.)  Call ctPageDefaults() from a script block anywhere after cCore.js is loaded.
  • And remove those same Commands and Parameters from the individual argument lists.  See the following example.

Before (From examples near the top of this page.)

<head> <script type="text/javascript" src="cCore.js"></script> </head> <body> <a href="http://www.anysite.com" onmouseover="return coolTip('This is the phrase in the coolTip', CAPTION,'Fancier',CAPCOLOR,'red',ABOVE,RELX,-20, FGCOLOR,'orange', BORDER,7,BGCOLOR,'lime' )" onmouseout="nd()">Go to AnySite</a> </body>

After

<head> <script type="text/javascript" src="cCore.js"></script> <script type="text/javascript"> ctPageDefaults(CAPCOLOR,'red',ABOVE,RELX,-20, FGCOLOR,'orange', BORDER,7,BGCOLOR,'lime'); </script> </head> <body> <a href="http://www.anysite.com" onmouseover="return coolTip('This is the phrase in the coolTip', CAPTION,'Fancier')" onmouseout="nd()">Go to AnySite</a> </body>

Using ctPageDefaults() has 2 obvious advantages.
  • It reduces the clutter in the coolTip() argument lists, making them easier to read and less susceptable to error.
  • It is much easier to change the behavior of all the coolTips from one place on the page.
The Commands processed by ctPageDefaults() are now the defaults for every call to coolTip() on the page.  Any of these new defaults can be further changed by including the Command again in the individual coolTip() argument list.
Site Defaults
A final step in setting up defaults is to create a single instance of ctPageDefaults() as a SITE default.  We will cover that when we get to "Helper Functions".
Application Notes
  1. If you are using other Javascript applications on your page, especially an application that involves capturing the cursor position, you should not have a conflict.  If you run into trouble, you will need a good knowledge of Javascript to work it out.  You should become familiar with coolTip in a simple environment before you attempt to integrate it with other applications.  A advanced documentation page will discuss how coolTip interacts with other javascript.  But don't go there until after you've mastered a basic familiarity with coolTip.
  2. Every page on your website will want to download cCore.js, (and possibly other "plug-in" files).  The download is time-consuming, and so your browser is smart enough to retrieve the coolTip modules from its cache.  However, a cached file is only available to later pages if those later pages request exactly the same file, from exactly the same web address.  Specifically, if you locate your html pages in separate directories (as FrontPageŠ often does), then be certain that all the pages refer to exactly the same instance of cCore.js (and the plug-ins).  A generic example would be to upload the coolTip files to "http://www.mysite.com/myJS/cCore.js", etc, and then be certain that every page on the site accesses this same file using:

    <script type="text/javascript" src="/myJS/cCore.js"></script>
Email links
Robert E Boughner
Documentation Status Page Modified: 05-26-2005
Home cooltip.boughner.us © 2005 Robert E. Boughner
All Rights Reserved		 Valid HTML 4.01!Valid CSS!