JavaScript

カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

TinyTipはカスタマイズしやすいツールチップを実装することができるjQueryプラグインです。軽量で使い方も簡単なので気軽に取り入れることができます。シンプルなゆえに自由度の高いスタイルを適用できるツールチップです。

TinyTipの使い方

TinyTip.jsのデモは以下でチェックすることができます。

TinyTip.js

TinyTip

ホバーやクリックでツールチップを表示させることが可能です。

使い方はjQuery本体とtinytip.jsをhead内に読み込み、ツールチップを表示させるHTMLを記述していきます。

<p class="sample">サンプル</p>

あとはTinyTipのセッティングをすれば完了です。

$(function(){
    $('.sample').tinytip({
        tooltip : 'サンプルテキスト',
        position : 'bottom',
        animation : {
            top : -10
        },
        fix : {
            top: 10,
            left: -5
        },
        speed : 100,
        on : 'click',
        off: 'click',
        preventClose : true,
        onLoad : function(e){
            alert('サンプルテキスト');
        }
    });
});

オプションで表示させるテキストや位置、スピード、読み込み時のコールバックなどを設定することができます。

また、上記ではonとoffに「click」が指定されていますが、これはクリックすることでツールチップを表示・非表示させる設定になります。

デフォルトではonが「mouseenter」、offが「mouseleave」になっています。表示と非表示のイベントをクリックやホバーで使い分けたりすることもできるので便利ですね。

表示されるツールチップは単純にテキストだけになるので、あとは自分で自由にCSSでスタイリングしていくことができます。

Sweefty/tinytip · GitHub

関連記事

  1. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  2. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  3. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  4. LC Micro Slider
  5. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

  6. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP