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

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  2. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

  3. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

  4. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  5. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  6. Filterable Product Grid

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP