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

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

  2. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

  3. jQuery Accordion
  4. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  5. Simply Modal Box
  6. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP