Zebra_Tooltips

JavaScript

シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

Zebra_Tooltipsは軽量でシンプルなツールチップを実装できるjQueryプラグインです。指定した要素にホバーするとスムーズでスマートなアニメーションとともにツールチップが表示されます。

アニメーションスピードや背景カラーなどを設定できるオプションもたくさん用意されているのでツールチップをカスタマイズしたい方にもピッタリです。

Zebra_Tooltips

Zebra_Tooltips

デフォルトでは要素にホバーするとツールチップが表示されるようになっています。逆にマウスを外すと非表示になります。

スムーズでさりげないアニメーションでツールチップが表示・非表示します。

ほかにも背景カラーやテキストカラーを変更したデモやツールチップの配置や最大幅を指定したデモなどをチェックできます。

細かくカスタマイズすることが可能なので、自分好みのツールチップや自サイトに合わせたツールチップをつくりたい場合にも最適です。

オプションについて

Zebra_Tooltipsのオプション項目にはさまざまなものがあります。

animation_speedではアニメーションのスピードを指定できます。デフォルトは250です。

背景カラーの変更はbackground_color(デフォルトは#000)、テキストカラーの変更はcolor(デフォルトは#FFF)になります。

また、max_widthではツールチップのMAX時の横幅を指定できます。こちらはデフォルト値250に設定されています。

  • center
  • left
  • right

デフォルトはcenterです。

そのほか、opacity、hide_delay、show_delayなどたくさんのオプションが用意されているので、気になる方はチェックしてみてはいかがでしょうか?

というわけで、軽量でスマートなアニメーションのツールチップを実装できるjQueryプラグイン「Zebra_Tooltips」のご紹介でした。

関連記事

  1. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  2. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  3. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  4. Create a month picker jQuery plugin
  5. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  6. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP