<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<style>
p{font-size:12px; line-height:16px;}
a{color:red ;}
#tip_body { /*ツールチップのデザイン*/
display: none;
position: absolute;
padding: 10px;
left: 5px;
font-size: 0.8em;
background-color: #333;
color:#fff;
border: 1px solid red;
opacity: 0.9 ;
filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90) ;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 9999; }
</style>
</head>
<body>
<p>
<a href="" class="tooltip" title="Minimal</br>aaaaa</br>">Shotoku</a></br>
<a href="" class="tooltip" title="<table><tr><td>maaaa1111111111111111111111111111111</td></tr><tr><td>111111111111111111111111111111111111111111111111</td></tr><tr><td>111111111111111111111111111111111111111111111111</td></tr></table>">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
<a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
</p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
this.t_tip = function() {
//ツールチップの出る場所
this.xOffset = -10;
this.yOffset = 20;
//マウスホバーイベント
$("a").unbind().hover(
function(e) {
//要素のtitle属性を取得してspanの中に含める
this.t = this.title;
this.title = '';
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$('body').append( '<span id="tip_body">' + this.t + '</span>' );
$('#tip_body').css("top", this.top+"px").css("left", this.left+"px").fadeIn("farst");
},
function() {
this.title = this.t;
$("#tip_body").remove();
}
//マウスの動きに合わせる
).mousemove(
function(e) {
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$("#tip_body").css("top", this.top+"px").css("left", this.left+"px");
}
);
};
$(function(){
var hoge = $('a').html();
console.log($('a').length);
console.log(hoge);
console.log(hoge.length);
$('.tooltip').each(function(i) {
console.log(i + ': ' + $(this).text());
});
t_tip();
});
</script>
</body>
</html>