Popper.js

JavaScript

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

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

Popper.js

Popper.js

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

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

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

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

関連記事

  1. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  2. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  3. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  4. JavaScript

    カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

    insigniaはカスタマイズ性に優れたタグ入力を実装することができる…

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP