no-image

JavaScript

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

jq-tooltipは多彩な方向に表示可能なツールチップを実装できるjQueryプラグインです。上下左右はもちろん、上の右寄りや下の左寄りなど、さまざまな方向にツールチップを表示できます。

data-tooltipという属性を使用

jq-tooltip

デモでは、TOP、RIGHT、BOTTM、LEFT……などといった要素がいくつか表示されていて、それぞれにマウスオーバーすることでその要素に書かれた方向にツールチップが表示されます。

TOP-LEFT、TOP-RIGHT、BOTTIM-LEFT、BOTTOM-RIGHTなど、上下左右だけではなくいろんな方向へカスタマイズできるのが便利です。

これらの方向の指定はdata-tooltipという属性を利用して行います。HTMLタグ内に直接この属性を記述できるので使い方もシンプルに実装できますね。

というわけで、多彩な方向にツールチップを表示できるjQueryプラグイン「jq-tooltip」の紹介でした。

関連記事

  1. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

  2. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  3. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

  4. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  5. jQuery Accordion
  6. PopCircle

最近の記事

  1. Anker PowerPort PD 1 & ライトニングケーブル(0.9m ホワイト)
  2. オリジナルチキン6ピース
  3. 200-DGCAM019
  4. ハクバ GW-PRO RED フォトグローブプロ PL

アーカイブ

PAGE TOP