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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  2. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  3. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  4. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  5. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

コメント

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

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

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP