Drooltip.js

JavaScript

拡張性の高い美しいツールチップを実装できる「Drooltip.js」

Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実装することができるネイティブなJavaScript プラグインです。軽量でオプションやアニメーションもいろいろ用意されているので、カスタマイズして使う場合にも最適です。

Drooltip.js

デモ

デモでは、HOVER ME、CUSTOM TRIGGERS、HTML ELEMENTS、AJAX/JSONP、SMART POSITIONNING、CUSTOM ANIMATIONSと、いくつかのパターンが用意されています。

ミニマルなデザインでさりげないアニメーションがとてもお洒落ですね。

また、オプションもいろいろ用意されているのでカスタマイズ性にも優れています。主なオプション項目は、element、trigger、position、background、color、animation、content、callbackです。

デフォルト値は、elementがdrooltip、triggerがhover、positionがtop、backgroundが#2175ff、colorが#fff、animationがbounce、contentとcallbackがnull。

ちなみに、animationはfade、float、material、bounceの4種類から設定することができます。

そのほか、トリガーを設定したりAJAX/JSONを読み込んだりAPIを利用したりと、さまざまなカスタマイズが可能なので、気になる人はぜひチェックしてみてはいかがでしょうか?

Drooltip.js

HEIFからJPEGに戻す方法iOS 11の画像フォーマットをHEIFからJPEGに戻す方法前のページ

高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」次のページjsPanel

最近の記事

  1. ウィンターホワイトマグツリー
  2. 読書の進捗状況を非表示にする
  3. 牛すじ煮込みカレーと温野菜
  4. クリスマスブレンドとホリデースクープ
  5. バタースコッチドーナツ
PAGE TOP