infoBox

JavaScript

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

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

infoBox

デモ

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

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

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

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

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

infoBox

関連記事

  1. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  2. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  3. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  4. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  5. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  6. flipLightBox

最近の記事

  1. M360bt

アーカイブ

PAGE TOP