<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<style>
/* 表示文字の装飾 */
div.tooltip1{
color: #555;
display: inline-block; /* インライン要素化 */
border-bottom:dashed 1px #555; /* 下線を引く */
}
/* ツールチップ部分を隠す */
div.tooltip1 span {
display: none;
}
/* マウスオーバー */
div.tooltip1:hover {
position: relative;
color: #333;
}
/* マウスオーバー時にツールチップを表示 */
div.tooltip1:hover span {
display: block; /* ボックス要素にする */
position: absolute; /* relativeからの絶対位置 */
top: 25px;
font-size: 90%;
color: #fff;
background-color: #51A2C1;
width: 800px;
padding: 5px;
border-radius:3px;
z-index:100;
}
/* フキダシ部分を作成 */
div.tooltip1 span:before{
content:'';
display:block;
position:absolute; /* relativeからの絶対位置 */
height:0;
width:0;
top:-13px;
left:15px;
border:13px transparent solid;
border-right-width:0;
border-left-color:#51A2C1;
transform:rotate(270deg); /* 傾きをつける */
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
z-index:100;
}
</style>
</head>
<body>
<p id="target">ターゲットだゆん</p>
<ul></ul>
<div id='aaa'>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
// $('#target').append('<span>要素内の最後に挿入</span>');
// $('ul').append('<li>追加されました</li>');
$('#aaa').append('<span>サンプル<br />フキダシのようなツールチップ</span>');
});
</script>
</body>
</html>
