チュートリアルなどで、ページの説明をするときなどにちょうど良さそうなツールチップ「grumble.js」のご紹介。
実装がとても簡単なのに、かなり良い感じの見た目なので、おすすめです。
GitHubページとデモページはこちらから
https://github.com/jamescryer/grumble.js
Examples and documentation on grumble.js
インストール等準備については割愛します。
で、一番シンプルなコードは下記のとおり。
$('#start').click(function(e){
e.preventDefault();
$('#grumble').grumble({
text: 'ボタンです', // 吹き出し内に表示したいテキスト
angle: 200, // 吹き出しの角度
distance: 3, // 要素との距離
showAfter: 1000, // 何秒後に表示
hideAfter: 2000 // 何秒後に非表示
});
});
HTMLは下記のように記述しました。
<button id="start">grumble.js START</button> <button id="grumble">ボタン</button>
「grumble.js START」と書かれたボタンをクリックすると、1秒後に「ボタンです」と書かれた吹き出しが表示され、表示された2秒後に自動的に消えます。
なお、吹き出しの大きさは、指定したテキストの長さによって自動的に変更されます。
また、特に指定しなくてもフェードイン・フェードアウトで表示されますので、それもなかなかいい感じです。
主には上のコードで事足りますが、それ以外に使えるオプションは下記のとおり。
type: 'alt-' hideAfter: false hasHideButton: true
1つ目は、指定すると、吹き出しが青色になります。
なお、吹き出しの色はオレンジと青の2色が用意されているようです。
2つめは、上でもご紹介した、吹き出しを非表示にする秒数を指定する hideAfter です。
こちらに、数値ではなく false を指定すると、吹き出しをクリックしたときに消えるようになります。
3つめは吹き出しを消すボタンが表示されるオプションです。
吹き出しの右下に、小さく四角いボタンが表示されます。
こちらは、hideAfter に false を指定した時に一緒に使うようですね。
ただ、個人的にはボタンのデザインがちょっと微妙かなと感じるので、あまり使うことはなさそう…。
CSSで無理くりデザイン変更しちゃえばOKかな？
と、いうことで、吹き出し型ツールチップ「grumble.js」のご紹介でした。
コードもシンプルで、動きも軽快なので、使い勝手は良さそうです。
簡単なチュートリアルを実装したいときなどに使ってみてはいかがでしょうか？
