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. no-image
  2. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  3. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  4. ScalableLightbox

    JavaScript

    ミニマルでレスポンシブに対応したLightbox風のjQueryプラグイン「ScalableLigh…

    ScalableLightboxはミニマルなデザインでレスポンシブに対…

  5. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  6. qpScroll

最近の記事

  1. ペットボトルホルスター
  2. SRS-XB43
  3. Nu:kin

アーカイブ

PAGE TOP