Cut & Paste Follow Link Upon Mouseover

Home / Free JavaScripts / Links / Here

Cut & Paste Link Tooltip

Credit: Jim Young

Description: Add more meaning to your text links with Jim's tooltip script. A dynamic box pops up alongside the link as the mouse moves over it, providing textual information. Compatible with IE4, NS4, and NS6!

Example:

Dynamic Drive
JavaScript Kit
Request Code
Freewarejava

Directions

Step 1: Add the following to the <HEAD> section of your page:

<STYLE> .ttip {border:1px solid black;font-size:12px;layer-background-color:lightyellow;background-color:lightyellow} </STYLE> <script> //Script created by Jim Young (www.requestcode.com) //Submitted to JavaScript Kit (http://javascriptkit.com) //Visit http://javascriptkit.com for this script //Set the tool tip message you want for each link here. var tip=new Array tip[0]='Visit Dynamic Drive<br /> for DHTML Scripts!' tip[1]='Visit JavaScript Kit for Great<br /> Scripts, Tutorials and Forums!' tip[2]='Visit Request Code for FREE JavaScripts!' tip[3]='Click here for some excellent<br />Java applets and tutorials' function showtip(current,e,num) { if (document.layers) // Netscape 4.0+ { theString="<DIV CLASS='ttip'>"+tip[num]+"</DIV>" document.tooltip.document.write(theString) document.tooltip.document.close() document.tooltip.left=e.pageX+14+'px' document.tooltip.top=e.pageY+2+'px' document.tooltip.visibility="show" } else { if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+ { elm=document.getElementById("tooltip") elml=current elm.innerHTML=tip[num] elm.style.height=elml.style.height elm.style.top=parseInt(elml.offsetTop+elml.offsetHeight)+'px' elm.style.left=parseInt(elml.offsetLeft+elml.offsetWidth+10)+'px' elm.style.visibility = "visible" } } } function hidetip(){ if (document.layers) // Netscape 4.0+ { document.tooltip.visibility="hidden" } else { if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+ { elm.style.visibility="hidden" } } } </script>

Step 2: Insert the below HTML code to the <BODY> section.

You'll need to edit both the code of Step 1 and 2 to configure the script. Please see documentation inside.

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info