今、あるサイトのモックアップを作っているのですが、そこに実装しようとしている機能があります。
ツールチップという機能で、日本語では吹き出しとも言います。
あるページ上のオブジェクトにマウスを合わせると、吹き出しが現れるという機能で、最近良く使われるようになってきました。
それで今回使おうと思ったのが、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 <b>tooltip text</b>.">Some Link</a>
これで動かせるんですが、本サイトのデモをダウンロードして、exampleを動かしてみたのですが、きちんと動作せず結構焦りました。
よくよく見てみたら、プラグインのファイルが読み込まれていませんでした。
「exampleが動かないってどういうことですか？」という感じです。
それでこちらで直して、動作するようになったものをアップしました。
動作確認はこんな感じで確認できます。
