とっても便利なツール、jQuery TOOLS(2011年4月18日)

javascriptを触る人ならjQueryはもうすでにご存じかとは思いますが、
そのjQueryをベースに様々なUIを実装できるのがjQuery TOOLSです。
いろんなことをクールに簡単に実装できる、なんとも便利なライブラリです。

▼jQuery TOOLSはコチラ▼
http://flowplayer.org/tools/index.html

今回はその中でも、ツールチップについて書きたいと思います。
テキストエリアにカーソル合わせるとツールチップがでてくるUIを実装する機会がありましたので、それについて少しご紹介します。

▼実装手順▼
①サイトから、jQuery TOOLSをダウンロードします。
ダウンロードしたjsを、任意のページで読み込みます。
<script type="text/javascript" src="＊＊＊/jquery.tools.min.js"></script>

②ツールチップを表示したい要素にタイトル属性を設定していきます。
title="hogehoge"、こんな感じです。
titleにはhtmlタグを埋め込んでもOK！

③ツールチップ生成のためにjsを書きます。
下の例はそのまんまサンプルのコピーですが、たいていの場合はこれでいいかと。
$("#myform :input")の部分と、あとはpositionとoffsetを各自の環境に合わせて調整すればOKです。

$(function(){
    $("#myform :input").tooltip({
        position: "center right",
        offset: [-2, 10],
        effect: "fade",
        opacity: 0.7
    });
});

④ツールチップのCSSを用意します。
これもほぼサンプルのままですが、今回はFFオンリーの設定を消したりと、若干調整してます。
.tooltip {
    background-color:#009be5;
    border:1px solid #fff;
    padding:10px 15px;
    width:250px;
    display:none;
    color:#fff;
    text-align:left;
    font-size:12px;
}


⑤もうやることはありません!!
あとは各自ブラウザでチェックするだけ。

実装後もちょっとした調整ならCSSとほんのちょっとのjsの記述だけでできてしまうので、細かな調整にも対応しやすく便利です！
そのほかにもたくさんやれることが詰まっていますので、興味が沸いたら是非試してみてください！。
ホーリー