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. Expanding Bar Navigation Concept
  2. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  3. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  4. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  5. jquery.simple-scroll-follow
  6. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP