[JS]シンプルながら優れモノ!ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip

ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう!

トリガーはホバーだけでなくクリックにも対応、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時の動作

top of page

©2017 coliss