<!-- Tooltip HTML -->
<div id="help_wrap" style="display:none;">
  <div id="help">
    <div id="help_text"></div>
    <div id="help_nipple"></div>
  </div>
</div>

<!-- Tooltip Anchor -->
<a href="#" class="help_button" id="awesome-help"><img src="images/help_button.png" alt="Halp!" /></a>

<!-- Tooltip Text -->
<div class="hide">
  <dl id="awesome-help-text">
    <dt>Awesome Help Title</dt>
    <dd>This is some really awesome helpful text.</dd>
  </dl>
</div>

<!-- Tooltip JQuery -->
<script type="text/javascript">
/*<![CDATA[*/
  $(document).ready(function(){
    // Mouse over triggers tooltip
    $(".help_button").mouseover(function(){
      // Find out the help_button anchor's ID
      var helpId = this.id;
      var helpText = $('#'+ helpId + '-text');
      // Clone the help text into the container HTML
      $("#help_text").html(helpText.clone());
      // Position it
      positionHelp(this);
      // Show it
      showHelp();
    });
    // Mouse out hides tooltip
    $(".help_button").mouseout(function(){hideHelp();});
    // Show function
    function showHelp(){$("#help_wrap").show();}
    // Hide function
    function hideHelp(){$("#help_wrap").hide();}
    // Position function
    function positionHelp(a){
      var container = $("#help_wrap");
      // To center the tooltip vertically we need it's height/2
      var height = container.height();
      var h = height/2;
      // Where is the anchor?
      var pos = $(a).position();
      // Based on the position of the trigger setup some positions & adjust
      var windowLeft = pos.left + 24;
      var windowTop = pos.top - h;
      var nippleTop = h - 2;
      // Position everything absolutely
      $("#help_nipple").css("top",nippleTop + "px");
      $("#help_wrap").css("left",windowLeft + "px");
      $("#help_wrap").css("top",windowTop + "px");
    }
  });
/*]]>*/
</script>