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

来源：互联网发布：淘宝客服外包服务编辑：程序博客网时间：2024/05/16 19:22

首先利用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

0 0