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. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

  2. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  3. no-image

    JavaScript

    ダイナミックに回転してコンテンツが切り替わる「Page Scroll 3D」

    Page Scroll 3Dは、クルッとダイナミックに回転してコンテン…

  4. jQuery-ResizableColumns

    JavaScript

    テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

    jQuery-ResizableColumnsは、テーブルのカラムをリ…

  5. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP