javascript - ページをリロードせずにほろ酔いツールチップ内に自己終了リンクを作成するにはどうすればよいですか?

Question

Tipsy を使用して一部のコンテンツを表示しています。このコンテンツ内に、ツールチップを閉じるためのリンク (大きな X) があります。ただし、クリックすると、ページの上部にジャンプするだけで、false を返すように設定していても、ツールチップを閉じることができません。私のコードは次のようになります。

$(".favs").tipsy({
    fade: true,
    gravity: 'n',
    trigger: "manual",
    html: true,
    offset: 5,
    opacity: '0.9',
    delayIn: 0,
    delayOut: 0,
    title:
      function() {
        return $("#favs_1").html();
      }
    });

  $(".favs").click(function(){
    $(this).tipsy("show");
    return false;
  });

  $(".closetip").click(function(){
    $(".tipsy").remove();
    return false;
  });

この HTML に適用:

<div style="height: 1800px;">
    <br /><br /><br /><br />
    <a href="#" class="favs">Favorite Movies</a>
</div>

<div id="favs_1" style="display: none;">
  <a href="#" class="closetip" style="float: right;">X</a>

  Tooltip content
</div>

関連フィドル: http://jsfiddle.net/gZkJJ/

クリックするとツールチップが閉じられるようにすることで、問題の半分を解決しました。event.stopPropagation(); を使用して、特定の div のクリックをこれから除外しようとしました。-- これにより、ツールチップが閉じられましたが、a) 問題の div は除外されておらず、b) X は依然としてページの上部にジャンプしていました。上記と同じ HTML ですが、JavaScript が少し異なります。

$(".favs").tipsy({
    fade: true,
    gravity: 'n',
    trigger: "manual",
    html: true,
    offset: 5,
    opacity: '0.9',
    delayIn: 0,
    delayOut: 0,
    title:
      function() {
        return $("#favs_1").html();
      }
    });

  $(".favs").click(function(){
    $(this).tipsy("show");
    return false;
  });

  $("html, .closetip").click(function() {
    $(".tipsy").remove();
  });

  $(".tipsy, .tipsy-n, .tipsy-inner, .favs").click(function(event){
    event.stopPropagation();
  });

このバリエーションに関連するフィドル: http://jsfiddle.net/u62eH/

リンクがフレームをリロードしているか、X を押す前に少し下にスクロールすることで強制的に上部にスクロールされていることを確認できるように、過度の高さと間隔を含めました。

どんな助けでも大歓迎です。明らかな何かが欠けているように感じます。