Place your mouse over the blue text to reveal a popup note.
Use on normal text, links and images
You can Customise the popup using CSS.
The default position of the popup box is central and below the cursor.
If a keyword is less than half the boxes width from the left edge of the page the popup box is positioned to the right of the cursor.
If a keyword is less than half the boxes width from the right of the page the popup box is positioned to the left of the cursor.
If a keyword is less than half the popup boxes height from the bottom of the window the box will show above the cursor.
<HTML>
<HEAD>
<TITLE>Popup Tooltip 2</TITLE>
<script type="text/javascript">
running=0
timer=null
elementID="mytip"
function showTip(str){
if(!document.getElementById(elementID)){
tipElement = document.createElement('div')
tipElement.setAttribute("id","mytip")
tipElement.setAttribute((document.all&&!window.opera?"className":"class"),"mytiprule")
document.body.appendChild(tipElement)
}
tipDisplay=document.getElementById("mytip")
tipDisplay.innerHTML=str
opac=0
opacStep=100/10
running=1
animate()
}
function animate(){
opac+=opacStep
timer=setTimeout("animate()",60)
if(opac>100-opacStep){
opac=100
clearTimeout(timer)
}
if("filters" in document.body&& "alpha" in document.body.filters){
tipDisplay.filters.alpha.opacity=opac
}
else{
tipDisplay.style.MozOpacity=(opac/100)-0.01
}
}
function fadeStop(){
opac=0
running=0
clearTimeout(timer)
tipDisplay.style.display="none"
}
function CurPos(e){
cursorX=(!e?event.clientX:e.clientX)+document.body.scrollLeft
cursorY=(!e?event.clientY:e.clientY)+document.body.scrollTop
followMouse()
}
function followMouse(){
if(running==0){return}
if(cursorX>document.body.clientWidth-(tipDisplay.offsetWidth/2)){
tipDisplay.style.left=cursorX-tipDisplay.offsetWidth
}
else if(cursorX<tipDisplay.offsetWidth/2){
tipDisplay.style.left=cursorX
}
else{
tipDisplay.style.left=cursorX-(tipDisplay.offsetWidth/2)
}
if(cursorY>document.body.clientHeight-tipDisplay.offsetHeight){
tipDisplay.style.top=cursorY-tipDisplay.offsetHeight
}
else{
tipDisplay.style.top=cursorY+20
}
tipDisplay.style.display="block"
}
document.onmousemove=CurPos
</script>
<style>
.mytiprule{
position:absolute;
width:150px;
font-size:12px;
text-align:center;
background-color:#AAAAff;
border:1px outset #0000ff;
filter:alpha(opacity=0);
-moz-opacity:0;
}
.keyWord{
cursor:hand;
cursor:pointer;
color:blue
}
</style>
</HEAD>
<BODY>
<h1>Popup Tooltip 2</h1>
<span class="keyWord" onmouseover="showTip('Hi I\'m normal :)')" onmouseout="fadeStop()">Text</span><br><br></BODY> </HTML>