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

サイト構築 -JavaScript

Post on:2014年3月13日

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'
	});
});