ツールチップPowerTip

ツールチップを表示する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がパワーアップしています!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA