Tooltip position

HTML

<div id="container">

<div class="tooltip-info">
    
    <div class="tooltip-trigger-info">
        <img class="tooltip-trigger" src="http://dl.dropbox.com/u/228089/tooltip/question.png" id="download" alt="trigger" title="trigger" />
    </div><!-- /tooltip-trigger-info -->
    
    <table id="dpop" class="popup">
        <tbody>
            <tr>
                <td id="topleft" class="corner"></td>
                <td class="top"></td>
                <td id="topright" class="corner"></td>
            </tr>
            <tr>
                <td class="left"></td>
                <td class="content">
                    test test test test test test test test <br />
                     test test test test test test test test <br />
                     test test test test test test test test <br />
                     test test test test test test test test                      test test test test test test test test                      test test test test test test test test                      test test test test test test test test                      test test test test test test test test                       test test test test test test test test                      test test test test test test test test                      test test test test test test test test                      test test test test test test test test 
                 </td>
                 <td class="right"></td>    
             </tr>
             <tr>
                 <td class="corner" id="bottomleft"></td>
                 <td class="bottom"><img width="14" height="29" alt="popup tail" src="http://dl.dropbox.com/u/228089/tooltip/tooltip-tail2.png"/></td>
                 <td id="bottomright" class="corner"></td>
             </tr>
         </tbody>
    </table>
                
</div><!-- /tooltip-info -->
    
</div><!-- /container -->

CSS

/* centering */
body {
    text-align:center;
}

#container {
    padding-top: 300px;
    width:500px;
    margin:0px auto;
    text-align:left;
}

.content{
    width:300px;
}

/* tooltip */

     .tooltip-info {
            position: relative;
/*            top: 150px;
            left: 100px;
            width: 500px;
*/        }
        .tooltip-trigger {
            position: absolute;
        }
     
        /* Bubble pop-up */

        .popup {
            position: absolute;
            display: none;
            z-index: 50;
            border-collapse: collapse;
        }

        .popup td.corner {
            height: 15px;
            width: 19px;
        }

.popup td {
    background: black ! important;
    float: none ! important;
    padding: 0 ! important;
    margin: 0 ! important;
}

        .popup td#topleft { background: url(http://dl.dropbox.com/u/228089/tooltip/tooltip-1.png) transparent ! important; }
        .popup td.top { background: url(http://dl.dropbox.com/u/228089/tooltip/tooltip-2.png) transparent ! important; }
        .popup td#topright { background: url(http://dl.dropbox.com/u/228089/tooltip/tooltip-3.png) transparent ! important; }
        .popup td.left { background: url(http://dl.dropbox.com/u/228089/tooltip/tooltip-4.png) transparent ! important; }
        .popup td.right { background: url(http://dl.dropbox.com/u/228089/tooltip/tooltip-5.png) transparent ! important; }
        .popup td#bottomleft { background: url(http://dl.dropbox.com/u/228089/tooltip/tooltip-6.png) transparent ! important; }
        .popup td.bottom { background: url(http://dl.dropbox.com/u/228089/tooltip/tooltip-7.png) transparent ! important; text-align: center;}
        .popup td.bottom img { display: block; margin: 0 auto; }
        .popup td#bottomright { background: url(http://dl.dropbox.com/u/228089/tooltip/tooltip-8.png) transparent ! important; }

        .popup table.popup-contents {
            font-size: 12px;
            line-height: 1.2em;
  ...

JavaScript

toolTip();

// tooltip variables
var distance = 10;
var time = 250;
var hideDelay = 250000;
var hideDelayTimer = null;

function toolTip() {
    $('.tooltip-info').each(function() {
        // tracker
        var beingShown = false;
        var shown = false;

        var trigger = $('.tooltip-trigger', this);
        var popup = $('.popup', this).css('opacity', 0);

        var position = $('.tooltip-info').position();
        var width = $('.popup').width();
        var height = $('.popup').height();

/*alert(
        ".tooltip-info - position.top = " + position.top + "\r" + 
        ".tooltip-info - position.right = " + position.right + "\r" +
        ".tooltip-info - position.bottom = " + position.bottom + "\r" +
        ".tooltip-info - position.left = " + position.left + "\r" +
        ".popup - width = " + width + "\r" +
        ".popup - height = " + height + "\r"
    );*/

        // set the mouseover and mouseout on both element
        $([trigger.get(0), popup.get(0)]).mouseover(function() {
            // stops the hide event if we move from the trigger to the popup element
            if (hideDelayTimer) clearTimeout(hideDelayTimer);

            // don't trigger the animation again if we're being shown, or already visible
            if (beingShown || shown) {
                return;
            } else {
                beingShown = true;

                // reset position of popup box
                popup.css({
                    top: -height,
                    left: -(0.5 * width)+5,
                    display: 'block' // brings the popup back in to view
                })

                // (we're using chaining on the popup) now animate it's opacity and position
                .animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    // once the animation is complete, set the tracker variables
                    beingShown = false;
       ...