Popper.js

JavaScript

軽量で見やすいツールチップを実装できる「Popper.js」

Popper.jsはユーザーにとって見やすいツールチップを実装できるJSライブラリです。容量が軽量なところもGoodですね。ツールチップを表示する位置を指定できたり、ドラッグした際にツールチップも追従させることができたりとカスタマイズして使いたい方にもピッタリのツールチップです。

Popper.js

Popper.js

ツールチップを表示する位置はplacementにtop、right、bottom、leftのいずれかを指定すればOKです。上下左右の好きな位置に表示させることができます。

ほかにもコンテナがスクロールで見えなくなりそうなときでもツールチップだけを見える位置にとどまらせたり、コンテナをドラッグしたときにツールチップも一緒に追従させたり、またはスクロール時にツールチップを見やすいように上下フリップさせたりといったことが可能です。

どの設定も閲覧するユーザーにとってはありがたい機能になるのではないでしょうか。

そんなわけで、軽量で見やすいツールチップを実装したい方は、ぜひPopper.jsをチェックしてみてください。

関連記事

  1. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  2. Bootstrap Mobile FullScreen Modal
  3. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  4. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  5. no-image
  6. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP