<!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.