メールでのお問い合わせはこちら、お問い合わせフォーム

超軽量のツールチップのスクリプト -jQuery PowerTip

[ 2014年11月30日 ]

今、あるサイトのモックアップを作っているのですが、そこに実装しようとしている機能があります。

ツールチップという機能で、日本語では吹き出しとも言います。

あるページ上のオブジェクトにマウスを合わせると、吹き出しが現れるという機能で、最近良く使われるようになってきました。

それで今回使おうと思ったのが、jQuery PowerTipというJqueryのプラグインです。

jQuery PowerTip
http://stevenbenner.github.io/jquery-powertip/

実装方法としては、Jqueryの本体と、jquery.powertip.jsを読み込み、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="js/jquery.powertip.js"></script>

ツールチップを表示する要素をjQueryのセレクタで指定し、スクリプトを実行します。

$('.tooltips').powerTip(options)

あとは、タイトルタグに表示したい文字を記載するか、

<a href="hoge/link" title="This will be the tooltip text.">Some Link</a>

もしくはdata属性に記載することでいけるみたいです。

<a href="/hoge/link" data-powertip="This will be the &lt;b&gt;tooltip text&lt;/b&gt;.">Some Link</a>

これで動かせるんですが、本サイトのデモをダウンロードして、exampleを動かしてみたのですが、きちんと動作せず結構焦りました。

よくよく見てみたら、プラグインのファイルが読み込まれていませんでした。

「exampleが動かないってどういうことですか?」という感じです。


それでこちらで直して、動作するようになったものをアップしました。

動作確認はこんな感じで確認できます。

powertip.jpg