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

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  2. Smooth Scroll behavior polyfill
  3. Quttons

    JavaScript

    ボタンの形状やカラーが変化するjQueryプラグイン「Quttons」

    Quttonsはボタンをクリックすると形状やカラーが変化して新しいコン…

  4. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  5. JQuery SlideShow

    JavaScript

    軽量な自動スライドショー(画像・動画)を実装できる「JQuery SlideShow」

    JQuery SlideShowは、画像・動画のスライドショーを実装で…

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

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP