Tooltip positioning issue...

[chrisdpucci]

Hello guys,

I recently put together a dynamic tooltip using ajax. It works great in IE and Firefox, but on Safari I am getting a strange positioning issue and I"m not sure why.

Basically if I activate the tooltip above the fold it works exactly as it should. If I scroll the page down however and then activate a link that utilizes the tooltip script, the tooltip is displayed around 150px away from the mouse which causes all sorts of problems.

As I mentioned it is designed to display the tooltip at the mouse point and it works great in every browser other than Safari. Here is the code:

// Code
function ShowMediaDescription(media_id, e)
{
      theObject = document.getElementById("tooltip");
      
      theObject.style.visibility = "visible";
      
      var posx = 0;
      var posy = 0;
      
      posx = e.clientX + document.body.scrollLeft;
      posy = e.clientY + document.body.scrollTop;
      
      theObject.style.left = posx + "px";
      theObject.style.top = posy + "px";
      
      serverPage = "/mypage.php?m=" + media_id;
      objID = "tooltip";
      
      var obj = document.getElementById(objID);
      obj.innerHTML = "<div align='center'><img src='/v2images/media-desc-loader.gif' /></div>";
      xmlhttp.open("GET", serverPage);
      xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            obj.innerHTML = xmlhttp.responseText;
            }
      }
      xmlhttp.send(null);
}

function HideMediaDescription()
{
      tObject = document.getElementById("tooltip");
      
      tObject.style.visibility = "hidden";
      tObject.style.height = "0px";
      tObject.style.width = "0px";
}

// Usage
<a href="somelink.php" target="_self" onmouseover="this.className='mediaover';ShowMediaDescription('342',event);" onmouseout="HideMediaDescription();">Link</a>

// Div Container - (at bottom of page, right before ending body tag)
<div id="tooltip" class="tooltip"></div>

// Tooltip CSS
.tooltip
{
      position:absolute;
      left:0px;
      top:0px;
      visibility:hidden;
      width:0px;
}

I think the issue is obviously something with my positioning code but I really don't know what to do to fix it. Hopefully someone out there has had a similiar experiencing working with tooltips on a Mac and can help.

thanks,

Chris

[the DtTvB]

Try replace the posx and posy with this one:

      posx = (typeof e.pageX != 'undefined') ? e.pageX : e.clientX + (document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
      posy = (typeof e.pageY != 'undefined') ? e.pageY : e.clientY + (document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

[SimplyFu]

if you use prototype, you can easily get absolute cumulative position of an element by using Position.cumulativeOffset function.

[chrisdpucci]

Try replace the posx and posy with this one:

      posx = (typeof e.pageX != 'undefined') ? e.pageX : e.clientX + (document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
      posy = (typeof e.pageY != 'undefined') ? e.pageY : e.clientY + (document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

I didn't test this so I'm not sure if it would work, but I did solve the issue by doing some browser checking and conditional statements. I wasn't aware that Safari has a bug in the implementation of clientX and clientY and you need to use pageX and pageY instead which is what I ended up doing. Updated code below for those who may need it in the future:

function ShowMediaDescription(media_id, e)
{
	// Detect browser type
   var uA = navigator.userAgent;
   var browserType = "unknown";

   if(uA.indexOf("Opera") > -1)
   {
        browserType = "Opera";
   }
   else if(uA.indexOf("Safari") > -1)
   {
		browserType = "Safari";
   }
   else if(uA.indexOf("Konqueror") > -1)
   {
		browserType = "Konqueror";
   }
   else if(uA.indexOf("Gecko") > -1) 
   {
		browserType = "Mozilla";
   }
   else if(uA.indexOf("MSIE") > -1)
   {
		browserType = "Internet Explorer";
   }

	theObject = document.getElementById("tooltip");
	
	theObject.style.visibility = "visible";
	
	var posx = 0;
	var posy = 0;
	
	if(browserType == "Safari")
	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else
	{
		posx = e.clientX + document.body.scrollLeft;
		posy = e.clientY + document.body.scrollTop;
	}
	
	theObject.style.left = posx + "px";
	theObject.style.top = posy + "px";
	
	serverPage = "/mypage.php?m=" + media_id;
	objID = "tooltip";
	
	var obj = document.getElementById(objID);
	obj.innerHTML = "<div align='center' style='width:80px;height:25px;background-color:#ffffff;border:1px solid #333333;'><img src='/v2images/media-desc-loader.gif' style='margin-top:2px;' /></div>";
	xmlhttp.open("GET", serverPage);
	xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		obj.innerHTML = xmlhttp.responseText;
		}
	}
	xmlhttp.send(null);
}

function HideMediaDescription()
{
	tObject = document.getElementById("tooltip");
	
	tObject.style.visibility = "hidden";
	tObject.style.height = "0px";
	tObject.style.width = "0px";
}

[SimplyFu]

great, even better if you can single out a function to obtain positioning value.