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. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  2. Simple Sidebar
  3. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  4. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  5. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  6. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP