Qtip2解决文本过多问题

工作遇到一个问题就是文本太多然后导致自适应大小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>

效果

这里写图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章