Popup Text Bubble

Lets-Ride.net
Home	Domain Names	Web Hosting	Website Design	SSL Certificates	Tips and Tidbits
Support Web Hosting Referral Program Acceptable Use Policies About US Contact Us Manage My Domains

Tips and Tidbits
Disclaimer: This is one of a collections of codes and website tools you may find useful. Some of The items described on these pages will direct you to information on other sites. Others were donated by our readers. Lets-Ride.net does not place any warrantee or guarantee of the usefulness, security, or workability of any of the items listed or documented on these pages. Use at your own risk!

Pop up text bubble when mouse is moved over text

This script will allow you to display a text bubble when the mouse is moved over the designated text or link. When the mouse is moved from the text the bubble disappears. Move your mouse over this text to see an example

To use this code simply click inside the window below, use your cursor to highlight the code, (or click the "Highlight All" button) and copy the code into your html document at the locations specified

Part 2 must be copied into the "body" of the HTML Page.
Paste the code below the <body> tag.

<script type="text/javascript"> /*********************************************** * Fixed ToolTip script- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var tipwidth='200px' //default tooltip width var tipbgcolor='lightyellow' //tooltip bgcolor var disappeardelay=500 //tooltip disappear speed onMouseout (in miliseconds) var vertical_offset="0px" //horizontal offset of tooltip from anchor link var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link /////No further editting needed var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="fixedtipdiv" style="visibility:hidden;width:'+tipwidth+';background-color:'+tipbgcolor+'" ></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, tipwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top=-500 if (tipwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=tipwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight } return edgeoffset } function fixedtooltip(menucontents, obj, e, tipwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidetip() dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv dropmenuobj.innerHTML=menucontents if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", tipwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px" } } function hidetip(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidetip(){ if (ie4||ns6) delayhide=setTimeout("hidetip()",disappeardelay) } function clearhidetip(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } </script>

Part 3 is the actual text and information that goes in the text bubble. Copy the code to the location you want the link. .

<a onMouseover="fixedtooltip('Change this message to reflect your needs.<p> Multiple lines can be used.<p>Will accept code such as <b>bold</b> and <i>Italics</i>.', this, event, '150px')" onMouseout="delayhidetip()"> <font color="#0000FF">Move your mouse over this text to see an example</font></a></p>

For more information on this code and other similar codes go to http://www.dynamicdrive.com

www.lets-ride.net is a division of www.lets-ride.com, LLC.