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

no-image縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」前のページ

スライダー付きのページネーションを実装できる「S-Pagination」次のページS-Pagination

関連記事

  1. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

  3. Bootstrap Show Password
  4. responsive-flip-pricing-table

    JavaScript

    レスポンシブでフリップによる価格表示の切り替えができる「Responsive Flip Pricin…

    レスポンシブに対応し、フリップによる価格表示の切り替えもできるテーブル…

  5. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP