Popper.js

JavaScript

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

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

Popper.js

Popper.js

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

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

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

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

スタイルリングスマホ用落下防止リング、車載ホルダー、スタンドと1つで3役の「スタイルリング」前のページ

時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」次のページtimedropper

関連記事

  1. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  2. pell

    JavaScript

    軽量でシンプルなWeb用のWYSIWYGエディタを実装できる「pell」

    pellは1.5KBと非常に軽量でシンプルなWeb用のWYSIWYGエ…

  3. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  4. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  5. Modaal

    JavaScript

    アクセシビリティに優れたモーダルウィンドウを実装できる「Modaal」

    ModaalはWCAG 2.0のレベルAAをサポートしているアクセシビ…

  6. hsimp

    JavaScript

    パスワードの安全性を教えてくれる「hsimp」

    hsimpは、パスワードがどれだけ安全かを判定してくれるスクリプトです…

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP