1.引入Jquery.js
2.引入tipsy.js插件
<!doctype html> <html> <head> <!--@author:luowen @time:2014-02-24 --> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>test</title> <style type="text/css"> #xx{width:100px; margin:100px;} /*tipsy*/ .tipsy { padding: 5px;font-size:12px; position: absolute; z-index: 100000; } .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; text-align: left; } .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-arrow { position: absolute; background: url(http://ossweb-img.qq.com/images/bns/act/a20131205intro/tipsy.gif) no-repeat top left; width: 9px; height: 5px; } .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; } .tipsy-nw .tipsy-arrow { top: 0; left: 10px; } .tipsy-ne .tipsy-arrow { top: 0; right: 10px; } .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; } .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; } .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; } .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; } .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; } </style> </head> <body> <h1 id="xx" original-title="我就是22323" >22323</h1> <script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script> <script src="./js/tipsy.js"></script> <script> $(function(){ $("#xx").tipsy({gravity: 's',live: true,html: true}); }); </script> </body> </html>
ps:详细内容http://onehackoranother.com/projects/jquery/tipsy/