This command reference lists the commands you can use to achieve a speech bubble type of coolTip. The technique used to obtain this effect, as well as how one can go about adding their own "bubble" images, is described and discussed. To include this support just add the following two lines to your HEAD section

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

Remember that commands are always in uppercase (case-sensitive) and can have none or up to two parameter values.

Download this module as a zip file.

The technique used for a "bubble" type of coolTip is basically the same approach used for the shadow effect. A schematic representation of what is done is shown in Figure 1.

Figure 1. Schematic illustration of a "bubble" type popup.

Two absolutely, positioned DIV containers are written to the ctDiv container. The first DIV container (ID="bLayer") contains the bubble image and is positioned at the upper left corner top=0px, left=0px. The second DIV container (ID="bContent") contains the actual coolTip content that is normally generated. (In other words, rather than being written directly to ctDiv, it is writen instead to the bContent layer.) However, before the layer generation routines are called, the fgcolor and bgcolor values are set to the null string and the border value is set to 0. Automatic horizontal/vertical positioning (hauto/vauto) and wrap (except for 'quotation' and 'roundcorners' popups) are turned off. The width of this inside container is set to the content area width. This content layer is offset from the upper left corner of the ctDiv layer by top=padTop 'px', left = padLeft 'px'. Since the ctDiv container is absolutely positioned, it serves as the positioning context for these two DIV containers so that the z-index values shown in the above figure are relative to the z-index value that ctDiv has. Other parameters that are disabled for "bubble" coolTips include:

• CAPTION
• CLOSETEXT
• FGBACKGROUND
• BGBACKGROUND
• FULLHTML
• FIXX/Y
• RELX/Y
• SHADOW
• LEFT, CENTER (except roundcorners)
• ABOVE (except roundcorners)

The code for this module has been modified to work with the Hide Form Plugin. Although the area outside of the bubble image is transparent, it was found that, because of its size, it takes on the color of the background which will appear above any SELECT boxes that it overlays, at least in Internet Explorer versions 5.5 and higher. This doesn't appear to be a problem with Opera 7 or Netscape 6+.

For the 'quotation' and 'roundcorners' popups the above description does not apply. These two types of popups are constructed using a 3 column by 3 row table with the outer table cells containing images which define the popup's edges while the innermost table cell is where the actual content is placed. Because of this, these two bubble types do not have the same restrictions as the others.

Another thing to consider is what happens when the popup's height exceeds the content area height. There are two ways to proceed on this matter.

1. Increase the content area height while keeping the aspect ratio of the image fixed. This means that the content width will also change which would require that the coolTip be regenerated, leading to possibly new height and width values. This also means that the layer generation routine would have to be called again with the new content area width. While this approach is probably the most accurate, it would require at a minimum that at least two additional calls to the layer generation routine be made in order to estimate approximate width/height values that would contain the coolTip's content. This is the approach used when one specifies the ADJBUBBLE parameter.
2. A more approximate method is used when the coolTip's height exceeds the content area height, and that is to increase the image's height without keeping the aspect ratio fixed. This is done by comparing the coolTip's height to the content area height (which is called bHtDiff in the code). If it is smaller, half of that difference is added to the padTop value so that the coolTip is positioned vertically in the middle of the content area. If this difference is negative, the absolute value of the difference is added to the image's height while keeping it's width fixed. This means that there will be some distortion of the background image, but for most cases, it should not be too bad since most coolTips have content that are less than the content area height. This approach also means that the layer generation routine doesn't need to be recalled again.

In setting up a "bubble" coolTip, it has been done in such a manner that the user can easily add more images if he/she so chooses. These images should be "gif" images because the area outside the boundaries of the "bubble" outline will be set to transparent and, at present, that can only be obtained with a "gif" image. The pertinent quantities required for each added image are illustrated in Figure 2.

Figure 2. Additional quantities required for each added "bubble" image.

1. The image's width (imgWidth) and height (imgHeight) values (in pixels)
2. The content area's width (contentWidth) and height (contentHeight) values (in pixels). This area must be rectangular. The easiest way to determine this is by a graphics program; determine the largest rectangular content area that will fit inside boundaries of the "bubble" outline.
3. The left (padLeft) and top (padTop) displacement of the content area from the upper left hand corner of the image (in pixels).
4. The x-offset (arwTipX) and y-offset (arwTipY) of the tip of the "bubble" outline from the upper left corner of the image (in pixels). Just make sure that these values will cause the popup to lie outside the cursor's position (including any normal offsetx/y settings) when it is displayed. If that doesn't happen, you may find that the popup will flash on/off as you move the cursor. This happens because the mouseover/mouseout events are being toggled on/off.

The items in BOLD lettering are what these quantities are called in the code. To add a new image to the "bubble" collection, one needs to register the image so that coolTip knows about it. You do this by calling the registerImages() routine, which takes two argruments. The first argument to this function is a comma, delimited text string which give the root name of the image, i.e., the image name without any prefixed path or postfixed extension (which is assumed to be a gif type image). The second argument is optional and is the path, relative to the location of the HTML file that uses the popup, where the images are stored. The default value of this second parameter is 'images'. Add each of the quantities indicated above to the similarily named arrays that follow this function call at the beginning of the cBubble.js module. Be sure these values are inserted before the closing bracket (]) and separate them by a comma.

Both the 'quotation' and 'roundcorners' bubble can be modified by the user (within reason) by using an image editing program to change the background color from white (#ffffff) to the color of your choice. In addition, the background color on the innermost table cell within the routine doSpecialBubble() must be changed too to match your color choice.

BUBBLE toggle

Indicates that a "bubble" type of coolTip should be shown. If no value is given to the BUBBLETYPE parameter (see below), a "flower" bubble image is used. Default value is no "bubble" coolTip is shown (0). When used on the command line, this command will toggle this command's current state to its opposite state. In addition, this command can accept an optional string parameter value which is the path to where the bubble images are located, relative to the web page. The default setting is images/
Variable: cd_bubble

BUBBLETYPE type of bubble image

A string value, giving the type of "bubble" image to display. Default value is 'flower'. Other permissible values are 'oval', 'square,' 'pushpin','quotation' and 'roundcorners'. These last two bubbletypes employ a 3 x 3 table with the outer cells filled with images (cornerTL.gif, edgeT.gif, cornerTR.gif,edgeL.gif, edgeR.gif,cornerBL.gif,edgeB.gif, tail.gif and cornerBR.gif), with the actual content in the center cell, which can be adjusted to match its content. These images must be placed in the same directory that the other bubble images are placed (default value is images/); preloading will occur automatically when the popup is first called so that there may be a slight delay in the first appearance of a popup. The automatic horizontal/vertical alignment properties and the WRAP command can be used with the last type of "bubble" mentioned above (roundcorners). The WRAP command can also be used for the quotation bubble.
Variable: cd_bubbletype

ADJBUBBLE resizes bubble for its content

Causes the "bubble" image to be resized proportionally (i.e., so that the aspect ratio [width/height] is held constant), according to how much content is in the coolTip. Default value is off (0). When used on the command line, it will switch the current default value to its opposite state. This parameter has no effect when BUBBLETYPE is either 'quotation' or 'roundcorners'. Use of this parameter could cause coolTips to be displayed slowly, depending on your machine's processor speed and should probably be used cautiously.
Variable: cd_adjbubble

The following examples illustrate the different types of "bubble" coolTips that are currently available. (Note the bold lettering below each link shows the coolTip call to invoke the first popup. The second call is the same except that the ADJBUBBLE parameter has been added. The flower examples use the following style rule for the body text: .fontClass {font-family: 'Comic Sans MS'; font-size: 20px;})

• flower bubble        adjust bubble size
  coolTip('This is a <b>flower</b> bubble popup', BUBBLE)
• oval bubble        adjust bubble size
  coolTip('This is an <b>oval</b> bubble popup', BUBBLE,BUBBLETYPE,'oval')
• square bubble        adjust bubble size
  coolTip('This is a <b>square</b> bubble popup', BUBBLE,BUBBLETYPE,'square')
• pushpin bubble        adjust bubble size
  coolTip('This is a <b>pushpin</b> bubble popup', BUBBLE,BUBBLETYPE,'pushpin')
• quotation bubble        adjust bubble size not applicable
  coolTip('This is a <b>quotation</b> bubble popup', BUBBLE,BUBBLETYPE,'quotation')
• roundcorners popup        adjust bubble size not applicable
  coolTip('This is a &ltb>roundcorners</b>
  popup', BUBBLE,BUBBLETYPE,'roundcorners')

Note that &lt; and &gt; are the entity references for "<" and ">" respectively. These are used to avoid any problems associated with firewalls, especially Norton's firewall.