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

指定した要素に対して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');
	}
});

対応ブラウザ

対応ブラウザはIE6を含むモダンブラウザ全て、とのことです。

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

IEでエラーが出てましたが、修正されることを期待して。

[ad#ad-2]

sponsors

top of page

©2018 coliss