How To Use The coolTip / overLIB¹ Extension

This page shows how to quickly start using the coolTip / overLIB extension for Dreamweaver and how to apply the commands within the suite to an HTML tag. Consult Core Module command reference for a complete listing of all of available core commands, and follow the links to the different plugins for a description of the commands associated with the different plugins².

1. If you haven't already done so, install the extension in your version of Dreamweaver (only MX and higher are supported). The easiest way to do this is by double-clicking on the Macromedia Extension Package file (.mxp). The other way would be to start the Extension Manager and install it from there. If this is done from within Dreamweaver itself, it will have to be stopped and re-started for the commands to become available to you.
2. After installing the extension, open the page to which you want to add coolTip / overLIB calls, and select an element. For demonstration purposes, a link (A) element will be discussed here, mainly because that is where you would most likely add the coolTip / overLIB call, but the same steps would be applied to any other element. The main point is that you must select the whole element, and not put the cursor within it. The easiest way to do this is to place the cursor within the link element you want and then select that element in the tag selector along the bottom left hand side of the main Dreamweaver window as shown in the figure to the right above. If just plain text is selected, then when any of the coolTip / overLIB commands are inserted on the page, an A tag with href set to "javascript:;" will be wrapped around the selection and the coolTip / overLIB call will be applied to that A tag.
3. With the element selected, add your coolTip / overLIB call by clicking Commands -->coolTip / overLIB->Insert command flyout. If this is a new document, the interface panel that is displayed will show all of the default variable settings associated with the Core Module as well as all of the plugin modules. For this example, we'll add "See the REB code set here" as the main body text and "overLIB Plugins" as the caption.
   • If an coolTip / overLIB call has already been applied to the element, then the panel associated with this command would also show the commands being applied in that call. There will also be a "Remove" button in the upper right-hand corner of the panel, and the radio buttons on the first panel will indicate which utility is being used.
4. When all panels have been completely filled out, a prompt box will appear. For overLIB, the maximum index will be 1, but for coolTip there could be several commands. This prompt box will not appear if only overLIB commands are being inserted on the page. Enter the index of the command that you want to modify in this box (or just OK for the first or only one) and that one will be selected. Clicking the Cancel button will behave in the same way as clicking the Cancel button on the main panel.
5. The most common items to be filled in are shown by the shading in the figure (the items marked 1 and 2. Note, this interface is from an earlier version of the extension).
   
   As indicated here you can also insert HTML markup and just about anything else. The opening and closing tags of HTML markup will be converted to their entity references when inserted on the page, but will be displayed normally in the panel as a convenience to the author. See the Help pages for further discussion of this point.
   
   As a user of this extension, you may be wondering what commands get included in the coolTip / overLIB call. The answer is that only selections that differ from their default settings will be included. This point will be discussed further in section 9 .
   • As illustrated, the "onmouseover" event is the default event for coolTip / overLIB and will include "return" when inserted on the page.
   • If another event is wanted it can be selected from the drop down box which contains events that apply to most elements on a page, according to the W3C Standards. If the event you want is not in this drop down box, then check the box labelled Other Event and type the event name in the box to its right, making sure that you include the initial "on".
   • As author, you are responsible for making sure that the event that you associate with this function call is supported by the selected element in your target browser because there will be no checks made to guarantee that it is a valid event for the element.
   • Because of the number of commands involved, they have been divided into numerous tabbed panels. Commands not applicable to overLIB will be greyed out (i.e., disabled). The Core Module commands are found in the first three panels.
   • As a final comment with regard to the markup that is inserted in the textarea marked TEXTSTRING, the author doesn't need to escape single quotes as the extension handles that for him/her. However, when text is displayed here the escaping will be removed.
6. Next click on the second tab labelled More Basic Options and select the modules that you want to include on your page. You must include at a minimum the Core Module. If you forget to do this, a warning will be given when the "Add" button is clicked. When a plugin is selected, you'll will be shown a File Selection Dialog that will allow you to select where that plugin is located, if this hasn't already been done. As shown here, no plugins have been selected yet, since none are highlighted. If you had included some plugins they would have been highlighted in this selection box, which accepts multiple selections.
   • When a command is inserted from one of the plugin tabs (Plugins and Styling) and the source file hasn't been referenced yet, a File Selection Dialog will appear so that you can select where that module is located.
7. After all commands have been selected, just click the "Add" button on the upper right and after a short delay, the command call will be added to the element. If there had been an coolTip / overLIB call already attached to this element, then the "Remove" button would also have been shown in the upper right, allowing the user of this extension to quickly remove that call for this element.
   • If you're making changes to an existing coolTip / overLIB call, it isn't necessary to first remove it. Just make the necessary changes in the UI and then click on "Add". The existing call will be replaced by the new one.
   • When the coolTip / overLIB call is added, links to all of the plugin source files that haven't yet been included will be inserted in the HEAD section and a DIV containment element with an ID of "overDiv" for overLIB or "ctDiv" for coolTip will be placed on the page just after the BODY tag, if one isn't there already. (Note: with version 4.10 or later of overLIB or with coolTip, this latter step isn't necessary since if you don't have the DIV container element declared, it will be dynamically created for you. However, it is a good idea to include the DIV declaration statement explicitly.)
   • When all coolTip / overLIB calls from all elements on the page have been removed, you'll be given a choice of whether you want to also remove these source file links and the "ctDiv / overDiv" declaration statement too.
8. When the coolTip / overLIB call has been inserted for the element, the UI will close with the element still selected, so that close command can be inserted by choosing Commands --> coolTip / overLIB -->Close - nd, which displays the interface shown here. The "onmouseout" is selected by default. Place a check in the checkbox if a "return" is to be included in the call. An optional delay in closing can be added by typing the delay time (in milliseconds) in the text box. (For coolTip, the text box labelled PUID may also be filled in to indicate which popup to close; this figure shows the interface when used with coolTip, since the PUID item is not disabled). Now click the "Add" button and the nd() command will be added and this UI will close.
9. There is one final item that must be discussed. As mentioned in a previous section, commands are inserted in an coolTip / overLIB call when the author's choices differ from the default variable settings (those are the ones that begin with the prefix 'ol_' in overLIB and 'cd_' in coolTip. Note these variables should be set using either ctPageDefaults or overlib_pagedefaults to avoid any possible errors.) But suppose that an author has changed some of these default variables. How does the extension know about these changes? That's where the last command of this suite comes in. Set default variables (see illustration) allows the author to set default variables for his web page. Place your cursor anywhere on the page (you don't need to have an element selected for this command to be active, whereas you do for the other two comands of this suite) and then select Commands --> coolTip / overLIB -->Set default variables. Make all of the changes that reflect the default variable settings in the UI, ensure that the radio button Change DEFAULT variables is selected, then click the "Apply" button on the upper right. Answer OK to the prompt about making changes to the default variables. When the changes have been applied, the radio button will switch to Add COMMAND to your page, which is the default choice for this command. You'll only have to do this once, since your settings are saved in the file called your_page_name.mno in the _notes directory, unless you delete this file.
   • An element can be selected before carrying out the steps outlined above, just make sure that the Change DEFAULT variables option is checked before clicking the "Apply" button. If you don't, then either a ctPageDefaults or overlib_pagedefaults command will be added to the selected element.
   • If you want to insert a Set default variables call in the HEAD section of your page, proceed as outlined above, making sure that the EVENT is set to "none", then click on the "Apply" button on the upper right.
   • If there is already a SCRIPT block in the HEAD section without a SRC attribute, the command will be inserted at the beginning of this block, otherwise a separate SCRIPT block containing the command will be inserted.
   • If there is already a function call of this type in the HEAD section, the UI will display the command settings being applied in the call along with the default settings of all other commands, and have the EVENT set to "none". Note that only the command parameters of the selected command, in the case of multiple instances, are shown in the interface.
   • If you use ctPageDefaults/overlib_pagedefaults on your web page, you should keep the default variable settings synchronized. Otherwise, you may find that the behavior of your coolTip / overLIB calls on your web page, after applying one of these functions, do not correspond to what you would expect. Also the settings that are saved have no influence on your web page; they are merely for allowing this extension to work well in conjunction with your web page design. If things get messed up, you can start over by simply deleting your_page_name.mno in the _notes directory.
10. If a plugin needs to be removed, click on Commands --> coolTip / overLIB --> Manage Modules (found only in the Advanced Version of this Extension). This will bring up an UI that shows whether there is a link to a particular module and whether any of its commands are being used on the page. If no commands are being used on the page, then just place a check in the box in the column Remove Link and its link statement will be removed from the page when the "Apply" button is clicked. Links to plugins are added as described in Section 6 above.

These are the basic steps needed to apply the commands of the coolTip / overLIB suite to elements on your web page. More details can be found by clicking on the "Help" button in the UI. Hopefully, this extension will make it easier to apply coolTip / overLIB to your web pages.

¹ The coolTip utility is derived from overLIB; consequently they share many of the same commands and that is why these two utilities are discussed together. The main difference between the two utilities is that coolTip is totally object based, with each popup having its own set of commands. From the user's viewpoint, it means that more than one popup at a time can be visible on a page at the same time which is not possible in overLIB.

² This extension will work with the "official" version of overLIB if one keeps in mind that not all of the plugin commands are supported in the "official" version. However, all of the Core Module commands would be applicable.

Thank you for visiting Fabrizio.com - Come back again soon.