Coda style tooltip

by timkl

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>
                    <table class="popup-contents">
                        <tbody>
                            <tr>
                                <td><a href="#">Some text Some text Some text text Some text text Some text</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">Some text Some text Some text</a></td>
                            </tr>
                         </tbody>
                     </table>
                 </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: 120px;
    width:400px;
    margin:0px auto;
    text-align:left;
}

/* 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;
    max-width: 300px;
        }

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

.popup td {
    background: white ! 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-5,
          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;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer)...