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

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  2. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  3. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  4. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  5. jQuery Section Navi Plugin
  6. Grasp Mobile Progress Circle

最近の記事

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

アーカイブ

PAGE TOP