PowerTipでツールチップを実装

簡単にツールチップを実装できるらしいPowerTipを使ってみました。
オプションでいろいろ弄れるようなので、自分好みのものを作れるみたいです。

ソースのダウンロードはこちら。

使い方

---

まずはjQueryと上記サイトからダウンロードしたPowerTipのjsとcssを読み込む。 <link rel="stylesheet" href="jquery.powertip.css" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="jquery.powertip.js"></script>

JavaScriptの記述 <script type="text/javascript"> $(function() { $('#north').powerTip({placement: 'n'}); $('#south').powerTip({placement: 's'}); $('#west').powerTip({placement: 'w'}); $('#east').powerTip({placement: 'e'}); $('#north-west').powerTip({placement: 'nw'}); $('#north-east').powerTip({placement: 'ne'}); $('#south-west').powerTip({placement: 'sw'}); $('#south-east').powerTip({placement: 'se'}); $('#input').powerTip({placement: 'e'}); }); </script>

HTML部分はこんな感じ。titleにツールチップで表示させるテキストを記述します。 <div id="north" class="btn" title="サンプルメッセージ（北）">north</div> <div id="south" class="btn" title="サンプルメッセージ（南）">south</div> <div id="west" class="btn" title="サンプルメッセージ（西）">west</div> <div id="east" class="btn" title="サンプルメッセージ（東）">east</div> <div id="north-west" class="btn" title="サンプルメッセージ（北西）">north-west</div> <div id="north-east" class="btn" title="サンプルメッセージ（北東）">north-east</div> <div id="south-west" class="btn" title="サンプルメッセージ（南西）">south-west</div> <div id="south-east" class="btn" title="サンプルメッセージ（南東）">south-east</div>

こんな感じになります→サンプル

最初のほうで触れたオプションを設定する場合は以下のような感じ。 $('#north').powerTip({ placement: 'n', // ツールチップの位置を指定（方角で指定） followMouse: false, // マウス追従の有無 mouseOnToPopup: false, // ツールチップにポインタを合わせても消えない offset: 10, // 表示させるツールチップの距離（要素からの距離） fadeInTime: 200, // フェードイン速度 fadeOutTime: 100 // フェードアウト速度 });

そのままでも十分使えますが、いろいろ弄ってみるのも面白いかもしれません。

おわり。