JavaScript

とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

使いやすさや見た目もシンプルで綺麗なツールチップを実装することができるjQueryプラグイン「gips」を使ってみました。オプションで好きな色も変更できますし、ボックス内にツールチップを閉じるためのクローズボタンも表示させることができたりと便利な機能もついているので個人的に気に入りました。ということで以下使い方です。

[ads_center]

使い方

いつも通りjQuery本体とダウンロードしたプラグインファイルを読み込みます。

<link href="css/gips.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/gips.js" type="text/javascript"></script>

各テキストボックスに表示するツールチップを設定していきます。

<script type="text/javascript">
$(document).ready(function () {
    $('input#purple').gips({ 'theme': 'purple', autoHide: true, text: 'ここはツールチップの中のテキストです' });
    $('input#green').gips({ 'theme': 'green', placement: 'left' });
    $('input#yellow').gips({ 'theme': 'yellow', autoHide: true, placement: 'right' });
    $('input#red').gips({ 'theme': 'red', placement: 'bottom' });
});
</script>

続いてHTMLです。

<div id="demo">
    <input type="text" value="Purple Tooltip Here." id="purple" />
    <input type="text" value="Green Tooltip Here." id="green" />
    <input type="text" value="Yellow Tooltip Here." id="yellow" />
    <input type="text" value="Red Tooltip Here." id="red" />
</div>

分かりやすく色の名前で各ツールチップのIDを設定しています。

オプション

以下オプションです。

delay

デフォルトは500です。ツールチップが表示されるまでの時間です。

autoHide

trueかfalseを指定できます。デフォルトはfalseに設定されていて、ツールチップ内の右上にクローズボタンが表示されます。trueにするとボタンがなくなり自動でツールチップが消えるようになります。

pause

上記のautoHideがtrueの場合に有効になります。ツールチップが表示されて消えるまでの時間を設定できます。デフォルトは5000です。

animationSpeed

アニメーションの時間を設定できます。デフォルトは500です。

placement

ツールチップが配置される四方の場所を指定できます。デフォルトはtopになっています。他にもleft、right、bottomを指定することで好きな場所に表示させることができます。

theme

ツールチップのカラーテーマを指定できます。定義されている色はpurple、green、yellow、redになります。

imagePath

クローズボタンを表示させる画像のパスを指定します。

text

ツールチップに表示させるテキストです。

ということでシンプルで綺麗なツールチップを使いたい時には覚えておきたいプラグインですね。以下のサイトからダウンロードできます。

関連記事

  1. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

  2. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  3. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  4. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  5. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  6. Picker

    JavaScript

    iOSのようなピッカーを実装できるJSライブラリ「Picker」

    Pickerは、iOSのUIのようなピッカーを実装することができるJS…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP