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

関連記事

  1. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  3. jQuery Parallax

    JavaScript

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

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

  4. jqueryIntroLoader
  5. Navi.js

    JavaScript

    ナビゲーションとコンテンツが連動して切り替わるjQueryプラグイン「Navi.js」

    ナビゲーションとコンテンツが連動して切り替わる便利なjQueryプラグ…

  6. jQuery UI Month Picker Plugin

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP