ツールチップに画像を含める方法と、ツールチップの動き方のパターンです。
動きは「マウスオーバーで出て、マウスの動きに合わせて動く」「画面下から」「画面右から」「回転しながら」の４パターンです。
まずは基本の「マウスオーバーで出て、マウスの動きに合わせて動く」です。
▼以下が実際のソースサンプルです。
$(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』さんです。
ありがとうございます。
