infoBox

JavaScript

マウスオーバーでインフォメーションボックスを表示させる「infoBox」

infoBoxはアイコンにマウスオーバーするとインフォメーションボックスを表示させることができるjQueryプラグインです。特定のポイントでその詳細をもっと知りたい人のみ、マウスオーバーで確認できるのが特徴です。

infoBox

デモ

デモでは本文中にインフォメーションアイコンがいくつか設置されていて、このアイコンにマウスオーバーするとインフォメーションボックスが表示される仕組みです。

詳細な情報が必要な人だけマウスオーバーでチェックできるので、本文のボリュームがとてもスッキリまとまりそうですね。デモに設置されているインフォメーションボックスには、背景がオレンジだったりグレーだったり、または表示される位置がアイコンの上だったり下だったりと、いくつか種類があります。

ボックス自体はとてもシンプルなので、いろんなサイトに合わせやすいのではないでしょうか。

また、infoBoxにはオプションも用意されていて、width、position、text_color、bg_colorといった項目のセッティングが可能です。オプションから手軽に幅や表示位置、カラーなどをカスタマイズできるようになっています。使い方も特に難しい設定もなく、簡単に実装できるはず。

マウスオーバーによるインフォメーションボックスを表示させたいという人は、ぜひ「infoBox」を活用されてみてはいかがでしょうか?

infoBox

関連記事

  1. Bootstrap Show Password
  2. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  3. jQuery Social Share Bar
  4. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  5. jQuery-Simple-MobileMenu
  6. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP