ヘルプ内にhtmlコンテンツを内包するツールチップ（ポップアップヘルプ的なもの）

世の中にツールチップ的なヘルプをポップアップするjsはたくさん転がっていて、たいがいの場合はそれらのライブラリを使えばことが済む。こんなのとか
http://www.ideaxidea.com/archives/2008/10/tooltips.html

ただ今回場合、中のヘルプにaタグの記述などがあり、ユーザ操作を必要とするので、マウスがヘルプ上にある場合はツルーチップは表示させ続ける必要がある。
この要件に合うものがなかなか見つからなかったので、自分で書くことにした。
以下はそのスクリプトです。つたない点があるかもしれませんが仕事用のメモなのでお許しを。
ちなみにjQueryの使用を前提としています。

htmlの記述

<a href="" class="popup">?</a>
<p class="tooltip">ここに<a href="">ヘルプ</a>の文言とかが入ります</p>

cssの記述

.tooltip{
  width:300px;
  background:#fff;
  border:1px solid #ccc;
  padding:5px;
  position:absolute;
  display:none;
}

javascriptの記述

var t;
$(function(){
   show_pupup(); // ポップアップ用スクリプト起動
   // ツールチップ側の監視
   $('tooltip').hover(
      function(){
          cleartimeout(t); // hide_popup() を停止
      },
      function(){
          $(this).hide();    // ツールチップを隠す
      }
   );
});

// ポップアップ表示のスクリプト
var show_popup = function(){
  $('.popup').hover(
      function(e){
          cleartimeout(t);
          var tooltip = $(this).next();
          var x = e.pageX;
          var y = e.pageY + 10;
          $('tooltip').hide();
          $(bubble).show().css({'top':y, 'left':x});
      },
      function(){
          cleartimeout(t);
          var bubble = $(this).next();
          if( $(bubble).css('display') == 'none' ) { return }
          t = setTimeout(function(){
                    hide_popup(bubble);
                }, 1000);
      }
   );
};
// ポップアップを隠す
var hide_popup = function(obj){
    $(obj).hide();
};

「？」にマウスが乗ったら、ツールチップを表示させ、そのまま外れたらsetTimeoutで1秒後にツールチップを消す。
「？」からマウスが外れても、1秒以内にtooltipにマウスを合わせると、hide_popup() がcleartimeoutされて、停止。tooltipから外れると消えるという仕組みです。
あれこれ悩んだ割には、動作原理は上記のような単純なもので良かったのかと。