Qtip2解决文本过多问题

最新推荐文章于 2024-08-12 08:45:11 发布

枫叶梨花

最新推荐文章于 2024-08-12 08:45:11 发布

阅读量492

点赞数

文章标签：前端-qtip2

本文链接：https://blog.csdn.net/flash_love/article/details/78205957

版权

工作遇到一个问题就是文本太多然后导致自适应大小input的框变形，然后就想用Qtip2来解决当文本多的时候，隐藏一部分，然后鼠标放上去再显示全部。下面是Qtip2的使用案例和效果(更多相关内容可以浏览官网)

<!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>qTip2 Example</title>
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>


      <link rel="stylesheet" type="text/css" href="http://qtip2.com/v/stable/jquery.qtip.css"/>


      <script>
      $(function(){
           $('.selector').qtip({
              content: 'I have a longer fade in duration and slideUp to hide!!I have a longer fade in duration and slideUp to hide',
              show: {
                  effect: function() {
                      $(this).fadeTo(500, 1);
                  }
              },
              hide: {
                  effect: function() {
                      $(this).slideUp();
                  }
              }
           });
       });
      </script>
        </head>

        <body>

            <span class="selector">content......</span>
        </body>


        </html>

效果

这里写图片描述

枫叶梨花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Qtip2解决文本过多问题

工作遇到一个问题就是文本太多然后导致自适应大小input的框变形，然后就想用Qtip2来解决当文本多的时候，隐藏一部分，然后鼠标放上去再显示全部。下面是Qtip2的使用案例和效果(更多相关内容可以浏览官网)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl
复制链接

扫一扫