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. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  2. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

  3. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  4. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  5. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

  6. Yet Another Ripple Plugin

最近の記事

  1. メンソレータム リップスティック
  2. スイデンテラス 濃厚バターチキン
  3. ドトール マンデリン
  4. 厚切りトーストツナチーズメルトとブラックコーヒー
  5. ドトール マイルドブレンドコーヒー

アーカイブ

PAGE TOP