CSB4 Rollover Links · Link Styles 1 · Link Styles 2 · Arrowhead · Websafe Fonts and tests · LINK HOVER TOOLTIP · OverLIB tooltip
by Erik Bosrup
To implement this cool tooltip script (found on this page ) in CSB takes a tiny bit of adjustment but is quite easy to do with great results! These tooltips are not caught by popup blockers so they can help define, display, explain features on your site in a slick, clean manner. (NOTE: if you use another software to build your site rather than CSB/TRELLIX, go to the OVERLIB site for the original code and instructions!)
Download the overlib zip file. overlib400.zip
Unzip it to a folder with your website files.
Use an FTP program to upload the overlib.js file to the directory that will hold your webpage with the special tooltips. Several pages can tie into the same file. (Need help with FTP? Read here)
Using the Insert > HTML feature, insert the page setup code (put this on each page with tooltips), toward the top of the page body.
Using the Insert > HTML feature, insert the link scripts shown below.
Using the codes below as a guide, you can implement other features shown on the overLIB website but not demonstrated here. Be sure to add onfocus="this.blur()" title="" to the samples on his page to remove dots and automatic CSB tooltip!
MODIFIED SCRIPTS FOR CSB/TRELLIX, AS SEEN ABOVE:
To capture the code, click Select All, Ctrl C to copy code. Ctrl V to paste the code into an insert > HTML (webgem in Trellix).
page setup script:
ordinary tooltip for text:
image script: change the name and size of the image, and include it in the webcomponent
Before publishing change gEMDIR to GEMDIR or the script will not load properly!
I used 2 of these on this page, each with it's own image, included.
Note: If you want to use 2 tooltips with the same image you can do it 2 ways:
1) use two inserted image scripts with the image in each webcomponent (sending image to website each time you insert it), or
2) upload your image using FTP software to your website to the same directory as your tooltips then do not include it in the webcomponent. You must also remove the ^GEMDIR/ in front of the image in the code! Then both the links would pull from the same image. This is the PREFERRED method as the image only has to load once!