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. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  2. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  3. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  4. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  5. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  6. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

コメント

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

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

最近の記事

  1. ミノン メン 薬用全身シャンプー
  2. ウェアラブルヒーター ネック

アーカイブ

PAGE TOP