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. raccordion

    JavaScript

    レスポンシブにも対応!アコーディオンのイメージスライダーを実装できるjQueryプラグイン「racc…

    レスポンシブにも対応しているjQueryプラグインのアコーディオンのイ…

  2. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  3. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

  4. Pogo Slider

    JavaScript

    豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

    Pogo Sliderは豊富なスライドアニメーションが揃っているjQu…

  5. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  6. Bootstrap Carousel Touch Slider with Text Animation

最近の記事

  1. 十和田湖
  2. 富有柿
  3. アイリスオーヤマの加湿器
PAGE TOP