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」のご紹介でした。

Safariが落ちる対処法iPhone(iOS)Safariのアドレスバーをタップすると突然落ちるのでその対処法前のページ

Photoshopのブレ効果(ぼかし)を使って流し撮り風の写真をつくるやり方次のページ流し撮り風の写真の作り方

関連記事

  1. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  2. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  3. JavaScript

    レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

    ポートフォリオなどでとても素敵なイメージギャラリーを実装することができ…

  4. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

  5. jqueryIntroLoader
  6. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP