ページにTipsなどをバルーンで表示できるbubbletip

jQueryをつかったTipsなどのバルーン表示を行う「Bubbletip」。

使い方

リンクのタグなどにIDを設定し、その後に表示したいバルーンの内容を記載。

<a id=”a1_up” href=”#”>above</a>
表示したいバルーンは予め「display:none」を設定。
<div id=”tip1_up” style=”display: none;”>
<pre class=”tip”>{ deltaDirection: ‘up’ }</pre>
</div>

そしてヘッダー部などにJavaScriptを以下のような形で記載。

<script type=”text/javascript”>// <![CDATA[
$(window).bind(‘load’, function() {
$(‘#a1_up’).bubbletip($(‘#tip1_up’));
});
// ]]></script>

バルーンを消すスクリプト

$(‘#a1_up’).removeBubbletip();

特定のバルーンを消す場合

$(‘#a1_up’).removeBubbletip([$(‘#tip1_up’), …]);

といった形で使います。
ブログやTipsサイトのちょっとした説明など様々な用途で使えそうです。

http://code.google.com/p/bubbletip/