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

シンプルなアラートを表示させることができる「smoke.js」前のページ

YouTubeのサムネイル画像をアニメーション表示してくれる「PreViewTube.js」次のページPreViewTube.js

関連記事

  1. jQuery Pretty Dropdowns
  2. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  3. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  4. jLetter

    JavaScript

    テキストを散らばせながら次々と表示させることができるjQueryプラグイン「jLetter」

    シンプルでちょっと目を引かせたいところなんかによさそうだったので使って…

  5. Turntable.js

    JavaScript

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

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

  6. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

最近の記事

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