Dynamic Drive DHTML scripts- Show Hint script

NS6+ IE5+ Opera 7+

Show Hint script

Author: Dynamic Drive

Description: "Show Hint" script displays an attractive hint box containing additional explanation on any item on your page. A hint box pops up next to the item when the mouse moves over it with relevant hints or useful information. A classic use of "Show Hint" is with your form fields, to better explain to the user how to fill them out.

We could all use a good hint, that's for sure!

Demo:

Directions:

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

Select All
<style type="text/css"> #hintbox{ /*CSS for pop up hint box */ position:absolute; top: 0; background-color: lightyellow; width: 150px; /*Default width of hint.*/ padding: 3px; border:1px solid black; font:normal 11px Verdana; line-height:18px; z-index:100; border-right: 3px solid black; border-bottom: 3px solid black; visibility: hidden; } .hintanchor{ /*CSS for link that shows hint onmouseover*/ font-weight: bold; color: navy; margin: 3px 8px; } </style> <script type="text/javascript"> /*********************************************** * Show Hint script- (c) Dynamic Drive (www.dynamicdrive.com) * Please keep this notice intact * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ var horizontal_offset="9px" //horizontal offset of hint box from anchor link /////No further editting needed var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change. var ie=document.all var ns6=document.getElementById&&!document.all 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 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=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset) } else{ var windowedge=ie && !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 showhint(menucontents, obj, e, tipwidth){ if ((ie||ns6) && document.getElementById("hintbox")){ dropmenuobj=document.getElementById("hintbox") dropmenuobj.innerHTML=menucontents dropmenuobj.style.left=dropmenuobj.style.top=-500 if (tipwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=tipwidth } dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px" dropmenuobj.style.visibility="visible" obj.onmouseout=hidetip } } function hidetip(e){ dropmenuobj.style.visibility="hidden" dropmenuobj.style.left="-500px" } function createhintbox(){ var divblock=document.createElement("div") divblock.setAttribute("id", "hintbox") document.body.appendChild(divblock) } if (window.addEventListener) window.addEventListener("load", createhintbox, false) else if (window.attachEvent) window.attachEvent("onload", createhintbox) else if (document.getElementById) window.onload=createhintbox </script>

Step 2: Add the below sample form to your page, which shows "Hint Me" in action:

More Information

As seen in the code of Step 2, the entire HTML for a hint consist of:

The part in red, function showhint(), is what you need to customize for each one of your hints:

showhint('hint_here', this, event, 'hint_width')"

The first parameter, "hint_here", is the text for your hint. HTML is supported (ie: "<b>must</b>"), though if it contains apostrophes, be sure to backslash them (ie: "I\'m the king of the world").

The fourth parameter is an optional width of the hint box. If you omit this parameter, the default width as specified in the CSS is used.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post