超軽量でクールな吹き出しプラグイン「vtip」

今回紹介するのは超軽量の吹き出しプラグイン「vtip」です。
デモページはこちら

さっそく導入方法いってみましょう。

ダウンロード

http://www.vertigo-project.com/projects/vtip
ここからダウンロードして解凍してください。

サーバーにアップロード

中にあるvtip.jsとimagesフォルダとCSSフォルダをサーバーにアップロードします。
まず先にimagesフォルダとCSSフォルダをアップロード。
アップロード先のURLをメモしておきます


vtip.jsの中身をメモ帳で開きちょっと書き換えます。
$('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');
↑ここのimages/vtip_arrow.pngの部分を、先ほどアップロードしたimagesフォルダ内にあるvtip_arrow.pngのURLに書き変えます。
例) $('p#vtip #vtipArrow').attr("src", 'http://example.com/vtip/images/vtip_arrow.png');

できたらセーブしてこれもアップロードしてURLをメモします。

導入する

フリープラグインにスクリプトタグを書きます。
srcの部分はvtip.jsをアップロードした先のURLにします。
例) <script type="text/javascript" src="http://example.com/vtip/vtip.js"></script>
アップロードしたCSSフォルダ内のvtip.cssもインポートします。
例) <link rel="stylesheet" type="text/css" href="http://example.com/vtip/css/vtip.css" />

吹き出しを適用したい要素にvtipクラスを付け、title属性の中に吹き出し内に表示させたい文字列を記述します。
例) <div class="vtip" title="吹き出しテスト">この要素にマウスが乗ると吹き出しが出ます。</div>

非常に軽量なので、邪魔にならずにいい感じです。