ツールチップを表示するjQueryプラグインPoserTipのご紹介です。
超軽量でカスタマイズしやすいjQueryツールチップです。
シンプルなツールチップから、マウス追従やポップアップタイプなどあります。
See the Pen
abJbMLQ by Saki (@SAKI)
on CodePen.
ダウンロード
PowerTip
jQueryは1.7+
使い方
JSは、jQueryとjquery.powertip.min.jsを読み込みます。
CSSは、基本のこちらjquery.powertip.min.cssの他、8色のCSSテーマが用意されています。
HTML<link href="...path_to_file.../jquery.powertip.min.css" rel="stylesheet">
...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="...path_to_file.../jquery.powertip.min.js"></script>
実装は、ツールチップを表示するセレクタに、スクリプトpowerTipを実行します。
ツールチップで表示する内容は、シンプルなテキストから、動的に設定したり、DOM要素を指定したりと、複雑なものまで対応しています。
シンプルにtitle属性で指定
title属性HTML
<a class="tip1" title="HELLO">こんにちは！</a>
JS
$('.tip1').powerTip({
placement:"ne" // ツールチップを表示する方角
});
data属性を利用
data属性HTML
<a class="tip2">こんにちは！</a>
JS
$('.tip2')
.data( "powertip","Hello world!" ) // data属性をセット。HTMLでセットしてもok
.powerTip({
placement:"se" // ツールチップを表示する方角
});
DOM要素指定
DOM要素指定HTML
<a class="tip3">写真はこちら</a>
JS
$('.tip3')
.data( "powertiptarget","tip3" ) // ツールチップとして表示する要素をセットする
.powerTip({
placement:"e" // ツールチップを表示する方角
});
その他、たくさんのオプションを提供されています。ダウンロード先を参照のこと！
（追記）
V1.3からオプションやAPIがパワーアップしています！
