<!DOCTYPE html>
<html lang="ja">
<head>
		<meta charset="utf-8">
		<title>ツールチップ</title>
</head>
<body>
		<h1>ツールチップ</h1>
		<p>
			サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。<br><a href="#">サンプルが入ります。</a> サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。
			サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。
			サンプルが入ります。サンプルが入ります。サンプルが入ります。サンプルが入ります。
		</p>
		<div class="tooltip"><p>ここには<br><strong>サンプル</strong><br>が入ります</p></div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</html>
body{
	background:white;
	color:black;
}
a{
	color:#FF9900;
}
h1{
	width:80%;
	margin:10px auto;
}
p{
	position:relative;
	margin:10px 10%;
}
div.tooltip{
	width:100px;
	position:absolute;
}
div.tooltip p{
	line-height:1.5;
	margin:0;
	font-size:small;
	background-color: #829FD9;
	padding:10px;
}
div.tooltip img{
	vertical-align:top;
}
$(function(){
	$("div.tooltip").hide();
	$("a").mouseover(function(){
		$("div.tooltip").fadeIn().css({
			"top":$(this).offset().top-20+"px", //クリックした要素の表示位置を取得し、20px上に
			"left":$(this).offset().left+$(this).width()+"px" //クリックした要素の表示位置を取得し、左からwidth分だけずらす
		});
	}).mouseout(function(){
		$("div.tooltip").fadeOut();
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.