How To Add A Tip Box
A tip box contains additional information for any item on your page. The hint box appears next to the item when the mouse moves over it, providing relevant information or instructions for the viewer.
<style type="text/css">

#hintbox{ /*CSS for pop up hint box */
position:absolute;
background-color: #E8E7CE;
width: 150px; /*Default width of hint box.*/
padding: 3px;
border:1px solid #D6F27D;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid grey;
border-bottom: 3px solid grey;
visibility: hidden;
}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: #000066;
margin: 3px 8px;
}

</style>

<script type="text/javascript">

/***********************************************
* Show Hint script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* 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>
CODE PART 1 - Copy and Paste in the <Head> Tag box under the Advanced tab on Properties Editor. Items in bold can be changed to suit the look you want.
CODE PART 2 - Copy and Paste the code into Notepad and alter the code in red to reflect what you want the tip box to contain. Create an insert HTML box (under the icon with a + sign) and paste the code into it. Position the box on the page. Don't use contractions or parenthesis within the text you want displayed as the ' and the ( )will interfere with the code.
<a href="#" class="hintanchor" onMouseover="showhint('When in the course of human events ', this, event, '150px')"><font color="#EA0000" size="2" face="Microsoft Sans Serif">[A]</font></a>
EXAMPLES:
The Declaration of Independence begins with what words?
Tutorial Submitted by :: sj enterprises
Copyright 2006 - Homestead Connection - All Rights Reserved
Homestead Website Design and SEO - S&J Enterprises
USER NAME:
Use the internal search feature to the right or the site map for easy access to information.
Home     Tools    FAQs     Web Design    Tips     Tutorials    Forum    Contact    Site  Map
Guides to using the Tools in the SiteBuilder program
Frequently asked questions about using Site Builder software
Homestead website design guides
Enhance the Homestead website with these tips
Tutorials to help Homestead users with creating their website
Homestead Connection Site Map and Search function
Homestead website design guides
Enhance the Homestead website with these tips
Tutorials to help Homestead users with creating their website