OverLIB tooltip

CSB4 Rollover Links · Link Styles 1 · Link Styles 2 · Arrowhead · Websafe Fonts and tests · LINK HOVER TOOLTIP · OverLIB tooltip

OverLIB tooltip

by Erik Bosrup

ORIGINAL CODE has a dotted edge around the link when clicked, and the image link (logo) to the left has a second white tooltip made automatically by CSB program.

Mouseover this sentence and the logo image to see overlib tooltip and one without borders!

THIS IS MY TWEAKED CODE that removes the dotted line when clicked, and the CSB tooltip!

Mouseover the logo image to the left to see a standard overlib tooltip . Try one that has captions and one without borders! . And how about the transparent image? or a solid image for the floating tooltip?

I use two of these styles on my home page! (Look in the left border for OVERLIB and in the center for the link to my host Total Choice Hosting for a solid image) And several more appear throughout the site too.

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:

Select All
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div> <script language="JavaScript" src="overlib.js"></script>

LINK CODES:

ordinary tooltip for text:

Select All
<a href="javascript:void(0);" onmouseover="return overlib('This is an ordinary popup.');" onmouseout="return nd();" onfocus="this.blur()" title="">tooltip</a>

without borders:

Select All
<a href="javascript:void(0);" onmouseover="return overlib('<b><font color=\'#FF6666\' face=\'Courier,Verdana,Arial,Helvetica\'>No border or image!</font></b>', FULLHTML)" onmouseout="return nd();" onfocus="this.blur()" title="">without borders!</a>

captions:

Select All
<a href="http://www.samisite.com" onmouseover="return overlib('Type your comments here', CAPTION, 'Type your caption here');" onmouseout="return nd();" onfocus="this.blur()">Link statement here</a>

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!

Select All
<A HREF="javascript:void(0);" onmouseover="return overlib('no dots, no 2nd tooltip');" onmouseout="return nd(); " onmouseover="return" onfocus="this.blur()" title=""><IMG SRC="^gEMDIR/backimage.gif" border=0 width="26" height="113" ></A>

Understanding the code:
http://www.address.com javascript: void(0)	Link address you want to open. Or, replace the address with this to eliminate the link from the hover code to make it informational only!
overlib('line1<BR>line2'	When you hover over the image, the popup shows. The bolded text would be replaced with your text. Use <BR> to add a line break in the text box. Delete if you don't need it!
#FF6666	Choose your popup FONT color. Not sure? Check out these color codes! Want to change the color of your popup? Modify the overlib.js file.
title=""	This has to be put in or you end up with a second tooltip that CSB/Trellix creates!
onfocus="this.blur()"	This piece actually removes the dotted line around the image when clicked.
target="_blank" or target="_top"	You can add this code snippet to select where you want to the link to load. _blank = new window _top = same window
OTHER SETTINGS/FEATURES	Read the documentation on the OVERLIB website to adjust the overlib.js file!