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

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  2. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  3. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  4. jquery.adaptive-backgrounds.js
  5. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

  6. FrameScrub

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP