jQuery.mousetip

JavaScript

マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

jQuery.mousetipはマウスの動きや位置に追従してくる軽量のツールチップを実装することができるjQueryプラグインです。使い方や機能ともにとてもシンプルなので手軽に導入できるところがいいですね。

jQuery.mousetip

デモ

コンテンツにホバーするとツールチップが表示され、マウスを動かしてもカーソルにピッタリとくっついてきます。何かの補足情報などを表示させたい時に便利ですね。

使い方は、jQuery本体とプラグインを読み込んだ状態で、以下のようにマークアップします。

<div>コンテンツ<span class="tip">ツールチップ1</span></div>
<div>コンテンツ<span class="tip">ツールチップ2</span></div>
<div>コンテンツ<span class="tip">ツールチップ3</span></div>

そして、あとはこんな感じでjQuery.mousetipをセットすればOKです。

$(function() {
    $('div').mousetip('.tip');
});

ポジションをカスタマイズしたい場合は以下のように、続けて数値を設定します。

$('div').mousetip('.tip', 20, 30);

他にもCSSでスタイリングしたりと、けっこう自由にカスタマイズできちゃう感じなので、気になる方は是非チェックしてみてください。

jQuery.mousetip

関連記事

  1. Animated Weather Cards

    JavaScript

    シンプルでお洒落なアニメーションつき天気予報「Animated Weather Cards」

    お洒落なアニメーションがついた天気予報カード「Animated Wea…

  2. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  3. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  4. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  5. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  6. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP