[JS]シンプルながら優れモノ!ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
Post on:2014年3月13日
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう!
トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。
DarkTooltip
DarkTooltip -GitHub
DarkTooltipのデモ
デモではさまざまなツールチップを試すことができます。
その中からごく一部をキャプチャで紹介。
上段はサイズ、中段は方向、下段はアニメーション
アニメーションなどの実際の動作はデモページでぜひ試してみてください。
DarkTooltipの使い方
Step 1: 外部ファイル
jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。
<head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script src="jquery.darktooltip.js"></script> </head>
Step 2: HTML
マークアップはシンプルで、ツールチップを表示したいテキストをa要素で囲い、表示するテキストをdata属性に記述します。
<a href="#" id="example" data-tooltip="Hello world 1">Example 1</a> <a href="#" id="light" data-tooltip="Hello world 2">Example 2</a>
idを使って個別に設定しても、classで同じスタイルを使い回してもOK
Step 3: JavaScript
jQueryのセレクタで要素を指定し、スクリプトを実行します。
一つ目はデフォルトのスタイル、二つ目にはアニメーションや方向などをカスタマイズしたツールチップです。
$(document).ready( function(){ //Basic $('#example').darkTooltip(); //With some options $('#light').darkTooltip({ animation:'flipIn', gravity:'west', confirm:true, theme:'light', trigger:'click' }); });
オプション
オプションでは、ツールチップのさまざまなスタイルを設定できます。
- opacity
- 不透明度
- content
- ツールチップのメッセージ
- siza
- ツールチップのサイズ
- gravity
- ツールチップの表示方向
- theme
- ツールチップのテーマ
- trigger
- ツールチップを表示するトリガー
- animation
- ツールチップを表示するアニメーション
- confirm
- confirm機能の有無
- yes
- yesのラベル
- no
- noのラベル
- finalMessage
- 最後に表示するメッセージ
- finalMessageDuration
- 最後に表示するメッセージの間隔
- onYes
- yse時の動作
- onNo
- no時の動作
sponsors