jquery.balloon.jsをクリックで表示したいときのTIPS

jquery.balloon.jsはツールチップ(バルーン？)を簡単に利用できるプラグインで、

$('a#help').balloon({contents: '<p>Help me!</p>'});

jsにこんな感じに書いておくとa#helpの要素にマウスオーバーするとcontentsで指定したHTML(プレーンテキストでもOK)をツールチップで表示してくれる。マウスアウトするとツールチップは消える。

これをマウスクリックに反応させようとすると、サイトのデモには

$('a#help').showBalloon({contents: '<p>Help me!</p>'})
  .toggle(
    function(){ $(this).hideBalloon(); },
    function(){ $(this).showBalloon(); }
  );

のようにすればおｋとのことなんだけど、これだとツールチップが初めから表示されてしまっている。

初めは非表示、クリックすると表示みたいにしたいときは、

jQuery(document).ready(function($) {
  $('a#help').showBalloon({contents: '<p>Help me!</p>'})
    // ごめんなさい、typoしてました...
    //  .hideBaloon()
    .hideBalloon()    // ここでいったん非表示にする。
    .toggle(
    // ごめんなさい、カンマ位置を間違えていました...
    //    function(){ $(this).showBalloon(); }
    //    function(){ $(this).hideBalloon(); },
      function(){ $(this).showBalloon(); },
      function(){ $(this).hideBalloon(); }
    );
});

みたいにしてあげればおｋ。
ちょっとカッコ悪いけど、CSSでごにょごにょやるよりかマシかなーと。