CSB4 Rollover Links · Link Styles 1 · Link Styles 2 · Arrowhead · Websafe Fonts and tests · LINK HOVER TOOLTIP · OverLIB tooltip
LINK HOVER TOOLTIP
CSB/Trellix places a TOOLTIP (floating description) in a white popup box over every link! Just hold your mouse over a link and it will appear, giving you more information.
If you do nothing to it, your tooltip description (title) will show the url address used in the link
sample link (to this page)
If you define it, the tooltip can have a small description of the page, product, reason for the link.
You can remove them.
For images: insert the image and then right click choose properties > image
Type in the name of the image or a description.
Expanded Popup text - The rest of this page is based on KW's popup sample #4.
(NOTE: I personally PREFER OVERLIB to this popup script! Nicer features, more flexible.)
I expanded KW's code explanation and added a couple other features:
hover color on links and adjusted underline feature,
removed the dotted line from the image when clicked,
removed the CSB/Trellix automatic tooltip.
Sample links on this page will open to my home page.
All tooltips on this page will use the same settings (placement, width) but can have different colors!
Limitations: Can not have more than one style on a page. Placement is limited. Use of <DIV> codes to activate the floating text limits use if not placed in t tables as shown in examples above! Need more flexibility the try overLIB script instead since each tooltip can have a separate placement, color, style, etc. definition.
TEXT: Roll your mouse over these text links to see tooltips. Note how the text becomes underlined when mouse hovers over.
IMAGE: Roll your mouse over this image to see the tooltip description.
There are four codes. You must place the first and second into your page, and you can adjust the width of the popup box in them. Make sure the width in code one and two match! Then use the third style if you use text links and the fourth style if you use image links.
Note: 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).
#1: style code. Define the link style (hover color and only underline on hover) and add the #pup description. Put at top of the page. (Note: the a: lines that define the link style can be removed, but the #pup line must remain! This code is normally placed into the HEAD section of the page)
#2: popup function. Put at top of page near the first code. (This code is normally placed into the BODY section of the page- - Can adjust the x offset to move text right/left, y offset to move text up/down)- 20
#3: text. Repeated for each of rollover popup text link, changing the id and the content for each.
You can make the text align left, center, or right.
You can have the hover text with or without a link
The popup language contains 2 parts: a description and a color: popup('description','color').
If you do not like the color, use a color from this chart. Yes, you can use NAMED colors instead of codes.
The div id = "d3" must be unique each time you use it on a page!
My samples: I inserted 3 versions of this code. I used id1, id2, and id3 for the text links:
(For visual review only - DO NOT COPY THESE! Use the code in Select All, above, instead!)
<div id="d3" style="width:100%; text-align:left">
<a href="http://www.samisite.com" onmouseover="popup('This support site is designed around<br>pc-based Trellix and CSB web site<br>building software. These instructions<br>may or may not work with<BR>the online version of Trellix!','#7FFFD4')" onmouseout="kill()">GOOD LINK</a></div>
<div id="d2" style="width:100%; text-align:left">
<a href="http://www.samisite.com " onmouseover="popup('All options are included in this sample.<br>The code is available further down the page, #3 ','#BFBF00')" onmouseout="kill()" title="" onfocus="this.blur()" target="_blank">BETTER LINK</a></div>
<div id="d1" style="width:100%; text-align:left">
#4: image. Place your image into your page in the usual fashion. (Insert > Picture)
Right click the image and choose "Create Link to URL or File" option. Paste the link/tooltip code into the link area as shown in image on the right below instead of insert > html! Leave off the last " as shown because the program will add it for you! Sample link in image will open in a new window.