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

TodoistのChrome拡張機能TodoistのChrome拡張機能があったので使ってみた前のページ

複数の画像を用いて動画プレイヤー風に仕上げることができる「Jquery Image Player」次のページ

関連記事

  1. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  2. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

  3. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  4. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

  5. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  6. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP