dhtml tooltip embedded in drupal

Hi all,

drupal 5.13, php5, mysql5

I've tried this example for a tool tip with a bubble at http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip and it works nicely without drupal. So I added it into my node template. I added the javascript functions to the head via the drupal_set_html_head("

..... in my node template.

    function showToolTip(e,text){
        if(document.all)e = event;

        var obj = document.getElementById('bubble_tooltip');
        var obj2 = document.getElementById('bubble_tooltip_content');
        obj2.innerHTML = text;
        obj.style.display = 'block';
        var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
        if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
        var leftPos = e.clientX - 100;
        if(leftPos<0)leftPos = 0;
        obj.style.left = leftPos + 'px';
        obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}

function hideToolTip()
{
        document.getElementById('bubble_tooltip').style.display = 'none';

}
   
   </script>

and added the following css to my themes css.

#bubble_tooltip{
        width:147px;
        position:absolute;
        display:none;
}
#bubble_tooltip .bubble_top{
        background-image: url('images/bubble_top.gif');
        background-repeat:no-repeat;
        height:16px;
}
#bubble_tooltip .bubble_middle{
        background-image: url('images/bubble_middle.gif');
        background-repeat:repeat-y;
        background-position:bottom left;
        padding-left:7px;
        padding-right:7px;
}
#bubble_tooltip .bubble_middle span{
        position:relative;
        top:-8px;
        font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
        font-size:11px;
}
#bubble_tooltip .bubble_bottom{
        background-image: url('images/bubble_bottom.gif');
        background-repeat:no-repeat;
        background-repeat:no-repeat;
        height:44px;
        position:relative;
        top:-6px;
}

and added the following code to fire it all off in my node-contenttype.tpl.php

<div id="bubble_tooltip">
        <div class="bubble_top"><span></span></div>
        <div class="bubble_middle"><span id="bubble_tooltip_content">Content is comming here as you probably can see.Content is comming here as you probably can see.</span></div>
        <div class="bubble_bottom"></div>
</div>
<h1>DHTML Balloon tooltip</h1>
<p>This demo demonstrates how the balloon tooltip works. Roll your mouse over the red links in the text below.</p>
<p><a href="#" onmouseover="showToolTip(event,'This is a simple, simple test');return false" onmouseout="hideToolTip()">Roll over me</a> to see the tooltip in action.</p>
<p>And here's some more content
<a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip. This is the content of the tooltip.');return false" onmouseout="hideToolTip()">Roll over me</a> </p>
<p>This is the last piece of the content on this web page</p>

Now if i call a test page directly with the html that calls it, the bubble tool tip appears right next to the mouse curser. But embedded in drupal it appears all over the place, but usually about 400px to the right and 200 down. I manually changed the javascript function to offset this but then IE refused to behave the same. Without drupal it functions just fine and in both browsers but embedded in drupal it behaves erratically. If anybody could hint at what im doing wrong that would be such a big help. The bubbles show, the content shows, its just the positioning seems to be way out and i'm not sure why. Just follow that link to get the image files or the whole thing, although i have put all the css, javascript and html needed bar the images. cheers mike