Rich HTML Balloon Tooltip - Tooltip position in Firefox and other browser incorrect

[vikasmta]

1) Script Title: Rich HTML Balloon Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...oontooltip.htm

3) Describe problem: It was working fine earlier but now the results on page differs from browser to browser
in Fire Fox : Tool tip is showing at the bottom of Page
in IE 8 : at the top left corner of the page
in Chrome : at the top left corner of the page

http://www.indiatravelvacation.com/i...x.htm#indiamap

Can anyone please help where the problem is

Thanks for your help in advance

Regards vikas

[jscheuer1]

.

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

That said, I'm surprised it ever worked. In IE it looks sort of OK sometimes. In the rest it's either at the top or below the image of the map. That's because browsers see the image as the trigger and position the tip in relation to either the top or bottom edge of the image taking into account the height of the image and the top and bottom edges of the page.

Use this reworked version of the script instead:

//Rich HTML Balloon Tooltip: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
//Created: September 10th, 2006
//Updated: May 9th, 10 for window edge bug
//Modified July 22nd, 2012 to react to mouse position for image maps see: http://www.dynamicdrive.com/forums/showthread.php?p=278150#post278150

var disappeardelay=800  //tooltip disappear delay (in miliseconds)
var verticaloffset=0.5 //vertical offset of tooltip from anchor link, if any
var enablearrowhead=0 //0 or 1, to disable or enable the arrow image
var arrowheadimg=["images/arrowdown.gif", "images/arrowup.gif"] //path to down and up arrow images
var arrowheadheight=13 //height of arrow image (amount to reveal)

/////No further editting needed

var ie=document.all
var ns6=document.getElementById&&!document.all
verticaloffset=(enablearrowhead)? verticaloffset+arrowheadheight : verticaloffset

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){
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (e.type=="mouseover")
obj.visibility="visible"
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
if (whichedge=="rightedge"){
edgeoffsetx=20
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffsetx=dropmenuobj.contentmeasure-0//obj.offsetWidth
if (dropmenuobj.x-edgeoffsetx+dropmenuobj.contentmeasure>windowedge)
edgeoffsetx=dropmenuobj.x-windowedge+dropmenuobj.contentmeasure
return edgeoffsetx
}
else{
edgeoffsety=0
var topedge=ie && !window.opera? iecompattest().scrollTop : window.pageYOffset
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) //move up?
edgeoffsety=dropmenuobj.contentmeasure+/* obj.offsetHeight */+(verticaloffset*2)
return edgeoffsety
}
}
function contains_ns6(a, b) {
if (!b) return;
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function displayballoontip(obj, e){ //main ballooon tooltip function
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined"){ //hide previous tooltip?
if(dropmenuobj === document.getElementById(obj.getAttribute("rel")) && dropmenuobj.style.visibility === 'visible'){
clearhidemenu()
return;
}
dropmenuobj.style.visibility="hidden"
}
clearhidemenu()
dropmenuobj=document.getElementById(obj.getAttribute("rel"))
dropmenuobj.onmouseout=function(e){
e = e || event;
if(e.currentTarget && e.relatedTarget && (e.currentTarget === e.relatedTarget || contains_ns6(e.currentTarget, e.relatedTarget))){return;}
if(e.srcElement && e.srcElement.contains(e.toElement)){return;}
delayhidemenu();
}
dropmenuobj.onmouseover = clearhidemenu
showhide(dropmenuobj.style, e)
dropmenuobj.x=e.pageX || e.clientX+iecompattest().scrollLeft;//getposOffset(obj, "left")
dropmenuobj.y=(e.pageY || e.clientY+iecompattest().scrollTop)+verticaloffset;//getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge") +"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")/* +obj.offsetHeight */ +"px"
if (enablearrowhead)
displaytiparrow()
}

function displaytiparrow(){ //function to display optional arrow image associated with tooltip
tiparrow=document.getElementById("arrowhead")
tiparrow.src=(edgeoffsety!=0)? arrowheadimg[0] : arrowheadimg[1]
var ieshadowwidth=(dropmenuobj.filters && dropmenuobj.filters[0])? dropmenuobj.filters[0].Strength-1 : 0
//modify "left" value depending on whether there's no room on right edge of browser to display it, respectively
tiparrow.style.left=(edgeoffsetx!=20)? parseInt(dropmenuobj.style.left)+dropmenuobj.offsetWidth-tiparrow.offsetWidth-10+"px" : parseInt(dropmenuobj.style.left)+5+"px"
//modify "top" value depending on whether there's no room on right edge of browser to display it, respectively
tiparrow.style.top=(edgeoffsety!=0)? parseInt(dropmenuobj.style.top)+dropmenuobj.offsetHeight-tiparrow.offsetHeight-ieshadowwidth+arrowheadheight+"px" : parseInt(dropmenuobj.style.top)-arrowheadheight+"px"
tiparrow.style.visibility="visible"
}

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'; dropmenuobj.style.left=0; if (enablearrowhead) tiparrow.style.visibility='hidden'",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

function reltoelement(linkobj){ //tests if a link has "rel" defined and it's the ID of an element on page
var relvalue=linkobj.getAttribute("rel")
return (relvalue!=null && relvalue!="" && document.getElementById(relvalue)!=null && document.getElementById(relvalue).className=="balloonstyle")? true : false
}

function initalizetooltip(){
var all_links=document.getElementsByTagName("area")
if (enablearrowhead){
tiparrow=document.createElement("img")
tiparrow.setAttribute("src", arrowheadimg[0])
tiparrow.setAttribute("id", "arrowhead")
document.body.appendChild(tiparrow)
tiparrow.onmouseover = clearhidemenu;
tiparrow.onmouseout = delayhidemenu;
}
for (var i=0; i<all_links.length; i++){
if (reltoelement(all_links[i])){ //if link has "rel" defined and it's the ID of an element on page
all_links[i].onmouseover=function(e){
var evtobj=window.event? window.event : e
displayballoontip(this, evtobj)
}
all_links[i].onmouseout=delayhidemenu
}
}
}

if (window.addEventListener)
window.addEventListener("load", initalizetooltip, false)
else if (window.attachEvent)
window.attachEvent("onload", initalizetooltip)
else if (document.getElementById)
window.onload=initalizetooltip

Notes: It positions the tip relative to where the mouse is when it activates it and it allows the tip to remain if the mouse moves over the tip. Because of that I found I could shorten the disappeardelay and make other adjustments to the configuration.

[vikasmta]

Dear Mr John

Thanks for your great Help. You are amazing, I was trying to rectify it from last 1 week. It in now working fine in all browsers.

Thanks again your your valuable help.

Regards Vikas