SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

  1. #1
    SitePoint Zealot chrisdpucci's Avatar
    Join Date
    Dec 2006
    Location
    On the internets
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tooltip positioning issue...

    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:
    // 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
    Last edited by chrisdpucci; Apr 20, 2007 at 11:47.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •