<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> .myTitle { position: absolute; z-index: 5999; border: solid 1px #315B6C; padding: 2px 5px; color: #fff; background: none repeat scroll 0 0 #FFFFFF; border-radius: 3px; display: none; background-color: #222; } /* .myTitle:before { position: absolute; bottom: auto; left: -1px; top: -15px; border-color: transparent transparent transparent #315B6C; border-style: solid; border- 15px; content: ""; display: block; 0; background-color: transparent; } .myTitle:after { position: absolute; bottom: auto; left: 0px; top: -13px; border-color: transparent transparent transparent #FFFFFF; border-style: solid; border- 15px; content: ""; display: block; 0; background-color: transparent; } */ </style> <body> <a href="http:vscss.com" title="vscss" >vscss</a> </body> <script type="text/javascript" src="http:vscss.com/dm/jquery.js"></script> <script type="text/javascript"> $(function() { $("a[title]").each(function() { var a = $(this); var title = a.attr('title'); if (title == undefined || title == "") return; a.data('title', title) .removeAttr('title') .hover( function () { var offset = a.offset(); $("<div class="myTitle"></div>").appendTo($("body")).html(title).css({ top: offset.top + a.outerHeight() - 1, left: offset.left + a.outerWidth() + 1 }).fadeIn(function () { var pop = $(this); //setTimeout(function () { pop.remove(); }, pop.text().length*80); }); }, function() { $(".myTitle").remove(); } ); }); }); </script> </html>