<!DOCTYPE html>
<html content="text/html; charset=UTF-8">
<title>tooltip</title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
#tooltip{
position:absolute;
border:1px solid #333;
background:#333333;
padding:10px;
color:#e5e6f0;
display:none;
z-index:30;
}
div{ width:100px; height:100px; background:#000; display:inline-block;}
a{ margin:10px; float:left;}
</style>
<a href="" class="tooltip">
<div title="No.1 第一行<br />
第二行<br />
第三行"></div>
</a>
<a href="" class="tooltip">
<div title="No.2 第一行<br />
第二行<br />
第三行"></div>
</a>
<script type="text/javascript">
(function($){
$.fn.tjtooltip = function(set) {
var settings = $.extend({
xoffset : 10,
yoffset : 20,
tooltip : 'tooltip'
} , set);
var tchild = null,
tipo = null,
d_t = '';
WinW = $(window).width(),
leftPx = 0,
tipo_width = 0;
this.hover(function(e){
tchild = $(this).children()[0];
d_t = tchild.title;
tchild.title = '';
tipo = document.createElement('p');
tipo.id = settings.tooltip;
tipo.innerHTML = d_t;
document.body.appendChild(tipo);
tipo_width = tipo.offsetWidth;
leftPx = ( e.pageX + settings.yoffset + tipo_width ) > WinW ?
( e.pageX - settings.yoffset - tipo_width ) : ( e.pageX + settings.yoffset );
tipo.style.top = ( e.pageY - settings.xoffset ) + "px";
tipo.style.left= leftPx + "px";
$("#"+settings.tooltip).fadeIn('fast');
},
function(){
tchild.title = d_t;
$("#"+settings.tooltip).remove();
}
);
this.mousemove(function(e){
if(!tipo){return false;}
leftPx = ( e.pageX + settings.yoffset + tipo_width ) > WinW ?
( e.pageX - settings.yoffset - tipo_width ) : ( e.pageX + settings.yoffset );
tipo.style.top = ( e.pageY - settings.xoffset ) + "px";
tipo.style.left= leftPx + "px";
});
return this;
}
})(jQuery);
$('a.tooltip').tjtooltip();
</script>
</body></html>
