[JS]表示位置の微調整も可能、キュートなデザインのツールチップを実装するスクリプト -grumble

サイト構築 -JavaScript

Post on:2011年7月29日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

指定した要素に対して360度全方向に表示でき、距離指定も可能なツールチップを紹介します。

grumble.js
デモページ

[ad#ad-2]

ツールチップは個々に表示位置の細かい設定をすることが可能で、デモページを例に4つの実装方法を紹介します。

「angle」が角度で、「distance」が距離の設定です。
表示・非表示のタイミングも設定できます。

ツールチップのみ（テキスト無し）

$('#grumble1').grumble(
	{
		text: '', 
		angle: 200, 
		distance: 3, 
		showAfter: 1000,
		hideAfter: 2000
	}
);

別デザインのツールチップ（テキスト有り）

$('#grumble2').grumble(
	{
		text: 'Ohh, blue...', 
		angle: 180, 
		distance: 0, 
		showAfter: 2000,
		type: 'alt-', 
		hideAfter: 2000
	}
);

クローズボタン付き

$('#grumble3').grumble(
	{
		text: 'Click me!',
		angle: 150,
		distance: 3,
		showAfter: 3000,
		hideAfter: false,
		hasHideButton: true,
		buttonHideText: 'Pop!'
	}
);

テキスト量を自動判定してサイズを大きく

$('#grumble4').grumble(
	{
		text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
		angle: 85,
		distance: 50,
		showAfter: 4000,
		hideAfter: 2000,
	}
);
);

callback関数も用意されています。

$('#myElement').grumble({
	showAfter: 1000,
	hideAfter: 2000,
	onShow: function(){
		console.log('triggered when show animation completes');
	},
	onBeginHide: function(){
		console.log('triggered when hide animation begins');
	},
	onHide: function () { 
		console.log('triggered when hide animation completes');
	}
});