鼠标悬停显示气泡

需求描述：当鼠标悬停在一个元素上的时候，显示气泡，气泡内容可以是一段文字或图片。实现如下：
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>气泡显示</title>
 6     <script src="../jquery-1.7.2.min.js"></script>
 7     <style type="text/css">
 8         .container {
 9             margin-top: 130px;
10         }
11         #xsztip {
12             padding: 8px 12px;
13             width: 140px;
14             display: block;
15             font-size: 16px;
16             color: #fff;
17             font-weight: bold;
18             background: #ED5517;
19             cursor: pointer;
20         }
21         #xszimg {
22             position: absolute;
23             display: none;
24             padding: 10px;
25             width: 160px;
26             background: #e0edf7;
27             border-radius: 6px;
28         }
29 
30         #xszimg::before {
31             content: "";
32             position: relative;
33             top: -20px;
34             left: 10px;
35             width: 0;
36             height: 0;
37             display: block;
38             border-left: 10px solid transparent;
39             border-right: 10px solid transparent;
40             border-bottom: 10px solid #e0edf7;
41         }
42     </style>
43 </head>
44 <body>
45 <div class="container">
46     <span id="xsztip">鼠标悬停显示气泡</span>
47     <div id="xszimg">
48         <span>The quick fox jumps over a lazy dog.</span>
49     </div>
50 </div>
51 <script type="text/javascript">
52     $(function(){
53         $("#xsztip").hover(function(){
54             show_xszimg(this);
55         },function(){
56             show_xszimg();
57         });
58         function show_xszimg(f){
59             var d=$("#xszimg");
60             if(!f){
61                 d.fadeOut()
62             }else{
63                 var c=$(f);
64                 var e=c.offset();
65                 var a=e.left;
66                 var b=e.top + 44;
67                 d.css({left:a+"px",top:b+"px"}).show();
68             }
69         }
70     });
71 </script>
72 </body>
73 </html>
效果截图：