Result
http://jsfiddle.net/kachibito/LWqCa/embedded/result,js,css,html
jQuery
$(document).ready(function() { //ホバーイベント発火 $(".tip_trigger").hover(function(){ //class="tip_trigger"内からclass="tip"を探す tip = $(this).find('.tip'); tip.show(); //表示 }, function() { tip.hide(); //非表示 //ここからマウスムーブイベント }).mousemove(function(e) { var mousex = e.pageX + 20; //位置を取得 var mousey = e.pageY + 20; //同上 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
.tip { color: #fff; background:#1d1d1d; display:none; /*--基本は非表示--*/ padding:10px; position:absolute; z-index:1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a{text-decoration:none;} p{margin:25px;width:500px;}
html
<p><a class="tip_trigger" href="javascript:void(0);">ツールチップの出るリンク<span class="tip" style="width: 500px;"><img src="01.png" />このspanの中身がツールチップ。画像も入れられる</span></p>