Place your mouse over the blue text to reveal a popup note.
Use on normal text, links and images
If a keyword is close to the left or right edge of the page (where part of the text box could be hidden) the script adjusts the position to keep it in full view.
A keyword is created simply by placing it in a span tag, for an inline keyword, or a div tag.
<span class="keyword" onmouseover="showTip(this,'Keyword information')" onmouseout="hideTip()">keyword</span>
and enter your keyword information.
The script dynamically creates the text box and places it below the keyword, you can adjust this position by changing variables offsetx and offsety to suit.
If you just want to show a single display for all your keywords create the following div
<div id="mytip"></div>
positioning it where you require, the script will then use this div to show all your messages.
<HTML>
<HEAD>
<TITLE>Popup Tooltip 1</TITLE>
<script type="text/javascript">
var offsetx = -100
var offsety = 30
var elementID="mytip"
function showTip(obj,tip){
if(document.createElement){
if(!document.getElementById(elementID)){
tipElement = document.createElement('div')
tipElement.id = elementID
tipElement.style.display="none"
tipElement.style.position="absolute"
tipElement.innerHTML=" "
document.body.appendChild(tipElement)
}
tipDisplay = document.getElementById(elementID)
tipDisplay.innerHTML = tip
tipDisplay.style.display = 'block'
objLeft = obj.offsetLeft
objTop = obj.offsetTop
parentEl = obj.offsetParent
while (parentEl != null){
objLeft += parentEl.offsetLeft
objTop += parentEl.offsetTop
parentEl = parentEl.offsetParent
}
tipDisplay.style.left=objLeft+offsetx+"px"
tipDisplay.style.top=objTop+offsety+"px"
if(tipDisplay.offsetLeft<0){
tipDisplay.style.left=0+"px"
}
if(tipDisplay.offsetLeft+tipDisplay.offsetWidth>document.body.clientWidth){
tipDisplay.style.left=document.body.clientWidth - tipDisplay.offsetWidth-50+"px"
}
}
}
function hideTip(){
tipDisplay.style.display="none"
}
/*
To have a static display place
<div id="mytip"></div>
in the body section where you want the display to be shown
*/
</script>
<style>
#mytip {
width:150px;
font-size:12px;
border:1px solid #5555aa;
background-color:#aaaaff;
}
.keyword{
color:blue;
cursor: hand;
cursor:pointer;
}
</style>
</HEAD>
<BODY>
<h1>Popup Tooltip 1</h1>
<span class="keyWord" onmouseover="showTip(this,'Normal Text')" onmouseout="hideTip()">text</span><br><br></BODY> </HTML>