Tippy.js

JavaScript

軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

Tippy.jsは軽量でありながらも多彩なツールチップを実装することができるJSライブラリです。表示位置を指定したり、矢印付きだったり、スケールやフェードなどのアニメーションを加えたり、さまざまなカスタマイズが可能です。

Tippy.js

デモ

デモでは、Default、Positioning、Arrows、Interactivity、Triggers (click)、Themes、Scale animation、Fade animation、Shift animation、Perspective animation、Delays、Instant、3s Transition、 duration、Callbacks、Popover HTML (click)といった、いろいろなタイプのサンプルが用意されています。

スケール、フェード、シフト、パースペクティブなど、豊富なアニメーションのほか、ディレイやコールバックなども設定することができます。

ピュアJavaScriptということで、jQueryなどに依存することなく使用できるのがいいですね。

また、オプションもたくさん用意されており、position、trigger、interactive、delay、animation、arrow、animateFill、duration、html、theme、offset、hideOnClick、multiple、popperOptionsといった項目のセッティングができます。

ちなみに、themeは「dark」と「light」から選択可能で、デフォルトでは「dark」に設定されています。

軽量で使い方も簡単ながら、多彩なオプションでカスタマイズ性にも優れたツールチップを実装したい人は、ぜひ「Tippy.js」を活用されてみてはいかがでしょうか?

Tippy.js

関連記事

  1. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

  2. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  3. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  4. NO IMAGE

    JavaScript

    テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

    jPaginateはWebページ内のテキストコンテンツをページ分割(ペ…

  5. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  6. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP