利用bootstrap中tooltip的使用，弹出微信二维码

首先利用html和Css实现以下效果

<div class="header-top">
			
             <div class="container">
	        <ul>
                    <li class="qq">
                        <a href="http://wpa.qq.com/msgrd?v=3&uin=2876355767&site=qq&menu=yes"
                           target="_blank" alt="远地qq" >
                            <span></span>客服QQ
                        </a>
                    </li>
                    <li class="wechat">
                        <a href="home" alt="远地微信" data-toggle="tooltip" data-placement="bottom" data-html="true"
                           title="<div class='tip'>扫一扫关注[远地]<img src='static/web/images/wechat.jpg'/></div>">
                            <span></span>微信公众号
                        </a>
                    </li>
                    <li class="weibo">
                        <a href="http://weibo.com/ydzc123" target="_blank" alt="远地微博">
                            <span></span>新浪微博
                        </a>
                    </li>
					<li ><a href="mailto:ydzc@shydzc.com"><span ></span>ydzc@shydzc.com</a></li>
					<li class="tele-in"><a href="contact" ><span ></span>投资热线 400-877-6603</a></li>
				</ul>
			</div>
		    <div class="clearfix"> </div>
		</div>

接下来是CSS代码，值得一提的是将每个图标存放在一张图片文件上，利用background-position属性将各图片显示，可提高加载速度

body{
	background:#fcfdff;
	font-family: '微软雅黑','黑体','Open Sans', sans-serif;
}
body a{
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-ms-transition: 0.5s all;
}
p{
	text-indent: 2em;
	line-height: 25px;
}
.header-top{
	background:#113f6c;
}
 ul{
	padding: 0;
	margin: 0;
	 list-style: none;
}
.header-top ul{
	float:right;
}
.header-top ul li{
	display: inline-block;
	padding: 1.3em 1em;
}
.header-top ul li a{
	font-size: 1em;
	text-decoration: none;
	color:#fff;
	vertical-align:auto;
}
.header-top ul li a:hover{
    color:#f8991e;
}
.header-top ul li span{
	background: url(../images/img-sprite-01.png) -16px 0px;
	width: 50px;
	height: 30px;
	display: inline-block;
}
.header-top ul li.tele-in span{
	background-position:-54px 0px;
}
.header-top ul li.qq span{
     background-position:-415px -50px;
 }
.header-top ul li.qq:hover span{
    background-position:-187px -50px;
}
.header-top ul li.wechat span{
    background-position:-490px -50px;
}
.header-top ul li.wechat:hover span{
    background-position:-259px -50px;
}
.header-top ul li.weibo span{
    background-position:-560px -50px;
}
.header-top ul li.weibo:hover span{
    background-position:-330px -50px;
}
/*以下是对bootstrap中tooltip的默认属性进行重新设定*/
 .tooltip-inner{
    width:150px;
    color:#113f6c;
    font-size: 1.2em;
    padding: 4px;
    background-color: #fff;
}
.tooltip.bottom .tooltip-arrow{
    border-bottom-color: #fff;
}

接下来调用bootstrap的tooltip方法，将显示和隐藏的时间进行分别设定

<script>
                $(function () {
                    $("[data-toggle='tooltip']").tooltip({delay:{show:0,hide:500}});
                });
            </script>

最后实现的效果可参考我制作的网站www.shydzc.com