読者です 読者をやめる 読者になる 読者になる

jquery3

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