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>

效果

這裏寫圖片描述

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