Tooltips 提示小窗

Qtip2提示插件 PLUGIN

Qtip2是比较优秀的Jquery提示工具,官方文档齐全,使用方便,详见官网。本框架在原版v3.0.3基础上稍微做了改动以更好使用。

  • 1.框架通过css文件覆盖了原版的默认样式,但是未修改jquery.qtip.css
  • 2.修改了jquery.qtip.js源文件,修改了默认指示箭头的尺寸。
  • 3.修改了modal模式下显示效果,由原版的相对定位改成浏览器绝对居中定位。
  • 4.新增了padding属性,该属性可修改内容的内边距,默认值是'5px 14px',用法举例:content:{padding:'10px'}
  • 5.新增了maxWidth属性,该属性可修改容器的最大宽度,默认值是500px,用法举例:content:{maxWidth:'500px'}
  • 6.增加手机端适配,如果有show参数,那么在手机端的窗口始终是绝对居中的。

基本使用方法如下:

  • <script src="https://src.axui.cn/src/plugins/qtip2/jquery.qtip.min.js" type="text/javascript"></script>
    <link href="https://src.axui.cn/src/plugins/qtip2/jquery.qtip.css" rel="stylesheet" type="text/css" >
    <script type='text/javascript'>
    $(document).ready(function () {
       $('#tool01').qtip({
        content: '伟大的中国'
            });
    });
    </script>
                            
  •                                 <a href="###" class="ax-btn" id="tool01">基本使用</a>
                                        

窗口位置

at属性是设置窗口相对目标的位置,比如at: 'bottom right'是指窗口在目标的右下方;my属性是设置窗口指示箭头相对窗口的位置,比如my: 'top left'是指箭头在窗口的左上方。以下简单列举常用位置,设定更多位置请参考官网

  • <script src="https://src.axui.cn/src/plugins/qtip2/jquery.qtip.min.js" type="text/javascript"></script>
    <link href="https://src.axui.cn/src/plugins/qtip2/jquery.qtip.css" rel="stylesheet" type="text/css" >
    <script type='text/javascript'>
    $(document).ready(function () {
         $('#tool05').qtip({
                content: {
                    text: '相对目标位置:at: "center center"
    相对窗口位置:my: "center center"' }, position: { at: 'center center', my: 'center center', }, show:{ ready: true, }, hide:{ event: 'click', } }); $('#at-c-r').qtip({ content: { text: '相对目标位置:at: "right center"
    相对窗口位置:my: "left center"' }, position: { at: 'right center', my: 'left center', }, show:{ ready: true, }, hide:{ event: 'click', } }); $('#at-c-l').qtip({ content: { text: '相对目标位置:at: "left center"
    相对窗口位置:my: "right center"' }, position: { at: 'left center', my: 'right center', }, show:{ ready: true, }, hide:{ event: 'click', } }); $('#at-t-c').qtip({ content: { text: '相对目标位置:at: "top center"
    相对窗口位置:my: "bottom center"' }, position: { at: 'top center', my: 'bottom center', }, show:{ ready: true, }, hide:{ event: 'click', } }); $('#at-b-c').qtip({ content: { text: '相对目标位置:at: "bottom center"
    相对窗口位置:my: "top center"' }, position: { at: 'bottom center', my: 'top center', }, show:{ ready: true, }, hide:{ event: 'click', } }); }); </script>
  •                                  <div style="width: 300px;height:160px;margin:100px auto;border:1px solid #ebebeb;position:relative;" id="tool05">
                                        <span id="at-c-r" style="position:absolute;top:50%;right: -1px"></span>
                                        <span id="at-c-l" style="position:absolute;top:50%;left:-1px"></span>
                                        <span id="at-t-c" style="position:absolute;top:-1px;left: 50%"></span>
                                        <span id="at-b-c" style="position:absolute;bottom:-1px;left:50%"></span>
                                    </div>
                                        

从页面取得内容

使用content: {text: $("#content").html()}方法可以从网页中取得内容。

  • <script src="https://src.axui.cn/src/plugins/qtip2/jquery.qtip.min.js" type="text/javascript"></script>
    <link href="https://src.axui.cn/src/plugins/qtip2/jquery.qtip.css" rel="stylesheet" type="text/css" >
    <script type='text/javascript'>
    $(document).ready(function () {
        $('#tool06').qtip({
                content: {
                    text: $("#content").html(),
                    padding:'0 14px'
                },
                position: {
                    at: 'right top',
                    my: 'left top',
                },
                show:{
                    event: 'click',
                },
                hide:{
                    event: 'click',
                }
            });
    });
    </script>
                            
  •                         <a href="###" class="ax-btn" id="tool06">页面居中弹窗</a>
    <div style="display: none;" id="content">
                                <div class="ax-comment">
    
                                    <div class="ax-item">
                                        <a href="###" class="ax-avatar" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"></a>
                                        <div class="ax-text">
                                            <div class="ax-row01 ax-row"><div class="ax-col"><a href="###" class="ax-name">李旺</a></div><i class="ax-floor">1楼</i></div>
                                            <div class="ax-reply"><a href="###">@张纯阳</a>:<span>对于很多中国人来说在任何一个领域只要不是第一那就是垃圾。</span><div class="ax-reply"><a href="###">@方志华</a>:<span>可就这么落后的航母除了美国以外还有谁能完全独立完成(航母本身加舰载机加武器弹药加后勤保障)? </span><div class="ax-reply"><a href="###">@李敏</a>:<span>抬头看世界,如今各国,林林总总,有几个抗揍。放眼望乾坤,前途无量,有几个国家,总有一天要挨揍。 </span></div></div></div>
                                            <div class="ax-row02"><span>大家有没有发现,我们在看待中国的实力时,不是单纯的和一个国家做对比,而是和除了中国以外的所有国家比较。仿佛中国在个个方面都是第一时,中国人才能说认可我们的国家牛X。</span></div>
                                            <div class="ax-row03 ax-row"><div class="ax-col"><span class="ax-time">1小时前</span></div><a href="###" class="ax-action ax-action-reply">回复</a><a href="###" class="ax-action ax-action-good"><span class="ax-iconfont ax-icon-good-fill"></span>51</a><a href="###" class="ax-action ax-action-bad"><span class="ax-iconfont ax-icon-bad-fill"></span>34</a></div>
                                        </div>
                                    </div>
    
                                </div>
                            </div>
                                        

页面居中弹窗

使用show: {modal: true}方法可以让窗口脱离原定位变成绝对居中带遮罩的弹窗。

  • <script src="https://src.axui.cn/src/plugins/qtip2/jquery.qtip.min.js" type="text/javascript"></script>
    <link href="https://src.axui.cn/src/plugins/qtip2/jquery.qtip.css" rel="stylesheet" type="text/css" >
    <script type='text/javascript'>
    $(document).ready(function () {
      $('#tool07').qtip({
                content: {
                    text: $("#content").html(),
                    padding:'0 14px'
                },
                position: {
                },
                show: {
                    event: 'click',
                    modal: true
                },
                hide: {
                    event: 'click'
                },
                style: {
                    tip: false,
                },
    
            });
    });
    </script>
                            
  •                         <a href="###" class="ax-btn" id="tool07">页面居中弹窗</a>
    <div style="display: none;" id="content">
                                <div class="ax-comment">
    
                                    <div class="ax-item">
                                        <a href="###" class="ax-avatar" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"></a>
                                        <div class="ax-text">
                                            <div class="ax-row01 ax-row"><div class="ax-col"><a href="###" class="ax-name">李旺</a></div><i class="ax-floor">1楼</i></div>
                                            <div class="ax-reply"><a href="###">@张纯阳</a>:<span>对于很多中国人来说在任何一个领域只要不是第一那就是垃圾。</span><div class="ax-reply"><a href="###">@方志华</a>:<span>可就这么落后的航母除了美国以外还有谁能完全独立完成(航母本身加舰载机加武器弹药加后勤保障)? </span><div class="ax-reply"><a href="###">@李敏</a>:<span>抬头看世界,如今各国,林林总总,有几个抗揍。放眼望乾坤,前途无量,有几个国家,总有一天要挨揍。 </span></div></div></div>
                                            <div class="ax-row02"><span>大家有没有发现,我们在看待中国的实力时,不是单纯的和一个国家做对比,而是和除了中国以外的所有国家比较。仿佛中国在个个方面都是第一时,中国人才能说认可我们的国家牛X。</span></div>
                                            <div class="ax-row03 ax-row"><div class="ax-col"><span class="ax-time">1小时前</span></div><a href="###" class="ax-action ax-action-reply">回复</a><a href="###" class="ax-action ax-action-good"><span class="ax-iconfont ax-icon-good-fill"></span>51</a><a href="###" class="ax-action ax-action-bad"><span class="ax-iconfont ax-icon-bad-fill"></span>34</a></div>
                                        </div>
                                    </div>
    
                                </div>
                            </div>
                                        
温馨提示
本框架的popup弹窗也可以使用tooltips场景。详见Popup