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. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  2. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  3. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  4. preload

    JavaScript

    プリロードやローディング画面を実装できるjQueryプラグイン「preload」

    preloadは、その名のとおり「プリロード」やローディング中の画面を…

  5. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

  6. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

コメント

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

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

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP