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

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

  2. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  3. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  4. no-image

    JavaScript

    ウィークデイ(週)のオプションを作成できる「jquery-weekdays」

    jquery-weekdaysはウィークデイ(週)のオプションを作成で…

  5. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  6. Image Figure Caption effects

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP