[JS]後発だけに高性能で、実装はシンプルで超軽量のツールチップのスクリプト -jQuery PowerTip

Post on:2012年8月15日

ページ上のさまざまな要素にツールチップをアニメーションで表示するjQueryのプラグインを紹介します。

サイトのキャプチャ

jQuery PowerTip
jQuery PowerTip -GitHub

jQuery PowerTipの特徴

  • 実装が簡単。
  • シンプルな構造。
  • ツールチップはカーソルに追従とスタティックに表示の2種類をサポート。
  • ツールチップの追従するエリアは設定可能。
  • カスタマイズも簡単。
  • キーボードナビゲーションにも対応。
  • 表示のアニメーションは、スムーズなフェードインとフェードアウト。
  • ツールチップは複数設置可。
  • あらゆる要素にツールチップを表示可能。
  • ビヘイビアやイベントをもった複雑なコンテンツにも対応。
  • 6KBと超軽量。

jQuery PowerTipのデモ

デモは、ベーシックな3種類が用意されています。

デモのキャプチャ

Demo: ツールチップを指定した方向（東西南北）に表示します。

デモのキャプチャ

Demo: 指定エリアのみに追従するツールチップを表示します。

デモのキャプチャ

Demo: 左のエリアをホバーすると東にツールチップを表示し、ツールチップ上もホバーの範囲に含めます。

jQuery PowerTipの使い方

外部ファイル

「jquery.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>

実装（HTML, JavaScript）

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

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

ツールチップに表示するのがプレーンテキストの場合、title属性を使用して配置するのが非常に直観的で後方互換性があります。

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

title属性を使用するのが好ましくない時は、HTML5のdata属性でも同じようにプレーンテキストを配置できます。

$('#element').data('powertip', 'This will be the <b>tooltip text</b>.');

もしくは

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

プレーンテキストではなく、少し複雑なDOM要素をツールチップに表示したい場合はidを指定することができます。

<div id="myToolTip">
	<p><b>Some Title</b></p>
	<p>This will be the tooltip text.</p>
	<p><a href="#">This link will be in the tooltip as well.</a></p>
</div>

#elementのホバー時に、#myToolTipを表示します。

$('#element').data('powertiptarget', 'myToolTip');

スクリプトのオプション

followMouse(default:false)
ツールチップがカーソルに追従するかどうか。
mouseOnToPopup(default:false)
ツールチップ上もホバーの対象にするかどうか。
placement(default:'n')
ツールチップを配置する方向（東西南北）。
smartPlacement(default:false)
ブラウザのビューポートを超えてしまう場合に、ビューポート内に表示。
popupId(default:'powerTip')
プレーンテキストではなく、divなどの複雑な要素を表示する際のid。
offset(default:10)
ツールチップのオフセット。
fadeInTime(default:200)
ツールチップのフェードインの時間。
fadeOutTime(default:100)
ツールチップのフェードアウトの時間。
closeDelay(default:100)
ツールチップを閉じる時間。
intentPollInterval(default:100)
ホバーを感知する精度（時間）。
intentSensitivity(default:7)
ホバーを感知する精度（距離）。

最後の二つは、100ミリ秒の間に7ピクセル以上カーソルを動かさないとツールチップは表示しないという設定です。

sponsors

top of page

©2024 coliss