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