【JavaScript】角度の調節も可能な吹き出し型ツールチップ「grumble.js」

村上 著者:村上

【JavaScript】角度の調節も可能な吹き出し型ツールチップ「grumble.js」

チュートリアルなどで、ページの説明をするときなどにちょうど良さそうなツールチップ「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」のご紹介でした。
コードもシンプルで、動きも軽快なので、使い勝手は良さそうです。
簡単なチュートリアルを実装したいときなどに使ってみてはいかがでしょうか?

  • この記事いいね! (0)

著者について

村上

村上 administrator