ツールチップに画像を表示させる

ツールチップ画像を含める方法と、ツールチップの動き方のパターンです。

動きは「マウスオーバーで出て、マウスの動きに合わせて動く」「画面下から」「画面右から」「回転しながら」の4パターンです。
まずは基本の「マウスオーバーで出て、マウスの動きに合わせて動く」です。

▼以下が実際のソースサンプルです。

$(function() {
    //ホバーイベント発火
    $("#link:not(:animated)").hover(function(){
        $('#tip').show(); //マウスオーバーで表示
    }, function() {
        $('#tip').hide(); //マウスアウトで非表示   

    //ここからマウスムーブイベント
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //マウスの位置(X座標)を取得
        var mousey = e.pageY + 20; //マウスの位置(Y座標)を取得
        var tipWidth = $('#tip').width(); //ツールチップの幅を取得
        var tipHeight = $('#tip').height(); //ツールチップの高さを取得

        var tipVisX = $(window).width() - (mousex + tipWidth);
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //画面幅を超えた場合はX座標を調節
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //画面高さを超えた場合はY座標を調節
            mousey = e.pageY - tipHeight - 20;
        }
        $('#tip').css({  top: mousey, left: mousex });
    });
});

▼CSS

body {
	overflow: hidden;/*-- 画面外に移動した時にスクロールバーが出ないように --*/
}
#tip, #tip_bottom, #tip_right, #tip_spin {
	background-color:#CCC;
	display:none; /*-- 基本は非表示 --*/
	padding:10px;
	position:absolute;
	z-index:0;
}
a {
	text-decoration:none;
}

▼HTML

<div id="main">
  <h1>ツールチップのデモです。</h1>
  <p><a href="javascript:void(0);"><span id="link">ツールチップの出るリンク</span><span id="tip" ><img src="images/img1.gif" /><br />
    このspanの中身がツールチップ。画像も文字も入れられる</span></a></p>

  <p><a href="javascript:void(0);"><span id="bottom">下から出てくる</span><span id="tip_bottom" ><img src="images/img2.gif" /><br />
    このspanの中身がツールチップ。画像も文字も入れられる</span></a></p>

  <p><a href="javascript:void(0);"><span id="right">右から出てくる</span><span id="tip_right"><img src="images/img3.gif" /><br />
    このspanの中身がツールチップ。画像も文字も入れられる</span></a></p>

  <p><a href="javascript:void(0);"><span id="spin">回転しながら出てくる</span><span id="tip_spin" ><img src="images/img4.gif" /><br />
    このspanの中身がツールチップ。画像も文字も入れられる</span></a></p>

</div>

次は、「画面下からアニメーションで出る」です。

$(function(){
	$("#bottom:not(:animated)").hover(function(){
		$("#tip_bottom")
		.show()//マウスオーバーで表示
		.css({//最初のツールチップの場所を指定
			"top":$(document).height(),//topをドキュメントの高さにして画面外に
			"left":$(this).offset().left + $("#bottom").width()})//リンクの位置と幅の分のleft
		.animate({
				"top":$("#bottom").offset().top + $("#link").height()//リンクの位置と高さの分を考慮した位置に移動
		},"fast");
		
		},function(){
			setTimeout(function(){
				$("#tip_bottom").animate({
				"top":$(document).height()//画面外へ移動
	   })},"fast")
	});
});

bodyにCSSで、overflow: hidden;を記述することで、ツールチップが画面外に移動した時にスクロールバーが出ないようにしています。

次は、「画面右からアニメーションで出る」です。

$(function(){
	$("#right:not(:animated)").hover(function(){
		$("#tip_right").show()//マウスオーバーで表示
		.css({//最初のツールチップの場所を指定
			"top":$(this).offset().top,//リンクの高さに合わせたtop
			"left":$(document).width()})//leftをドキュメントの幅にして画面外に
		.animate({
				"left":$("#right").offset().left + $("#right").width()//リンクの位置と幅の分を考慮した位置に移動
		},"fast");
		
		},function(){
			setTimeout(function(){
				$("#tip_right").animate({
				"left":$(document).width()//画面外へ移動
	  })},"fast");
	});
});

次は、「回転しながらアニメーションで出る」です。

$(function(){
$('#spin').on('mouseover',spin);
})
function spin() {
			$("#tip_spin").show()
			.css({
			     "top":$(this).offset().top,
			     "left":$(document).width()})
            .animate({  
				 'z-index': 1,//z-indexを0から1に変更する
                 "left":$("#spin").offset().left + $("#spin").width()//同時にリンクの位置と幅の分を考慮した位置に移動   
				      },
                      {
					   duration: 2000, //アニメーションの時間
                       //ステップ中の処理
                       step: function (num) {//引数num:処理途中の変化している値
                       //変化する値を使ってちょっとずつ回転させる
                       $(this).css({
								   transform: 'rotate(' + (num * -360) + 'deg)'//cssで角度を変える
                                   });
                      },
                       //完了時の処理
                       complete: function () {
                                     $('#tip_spin').css('z-index', 0)//次回のことを考えz-indexを1から0に戻す
                                               }
    });
	$('#spin').mouseout(function(){
								 $('#tip_spin').hide()
								 });
}

z-indexを0から1にアニメーションさせることで、変化するz-indexの値を使って角度を計算して回転させています。

今回、参考にさせていただいたのは、
iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった – テクメモ』さん、
要素を回転させる – jobteck.jp』さんです。
ありがとうございます。

デモページは、こちら