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

Flex-box Galleryランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」前のページ

Webアプリケーションに最適なレスポンシブ対応メニュー「HR Navigation Responsive Menu」次のページHR Navigation Responsive Menu

関連記事

  1. ScrollMenu.js

    JavaScript

    縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」

    ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しい…

  2. TyperText

    JavaScript

    テキストタイピングエフェクトを実装できる「TyperText」

    TyperTextはテキストタイピングエフェクトを実装できるjQuer…

  3. NO IMAGE
  4. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  5. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP