Popper.js

JavaScript

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

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

Popper.js

Popper.js

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

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

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

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

関連記事

  1. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  2. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  3. jCider

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

  4. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  5. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  6. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP