为了账号安全,请及时绑定邮箱和手机立即绑定
关注
梭梭酱冲鸭

viewport没生效?

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <style>

  body {

    padding: 100px;

  }

  .btn {

    margin: 20px 10px 20px;

  }

  

  #viewport {

      width:100px;

      height:100px;

      border:1px solid red;

  }

  </style>

</head>

<body>

  <h3>按钮做的提示框</h3>

  <button type="button" 

  class="btn btn-default" 

  id="myTooltip1" >

    提示框居左</button>

      

  <button type="button" class="btn btn-default" id="myTooltip2">提示框在顶部</button>

  <div id="viewport">

      

  <button type="button" class="btn btn-default" id="myTooltip3">提示框在底部</button>

  <button type="button" class="btn btn-default" id="myTooltip4">提示框居右</button>

  

  </div>

  <h3>链接制作的提示框</h3>

  <a href="##" class="btn btn-primary" id="myTooltip5">我是提示框</a>

  <a href="##" class="btn btn-primary" id="myTooltip6">我是提示框</a>

  <a href="##" class="btn btn-primary" id="myTooltip7">我是提示框</a>

  <a href="##" class="btn btn-primary" id="myTooltip8">我是提示框</a>

  

  <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <script>

  $(function(){

      

    $('[data-toggle="tooltip"]').tooltip();

  

    $('#myTooltip2').tooltip({

      title:"我是一个提示框,我在顶部出现",

      placement:"top",

      animation:"true"

    });

    

    $('#myTooltip1').tooltip({

      title:"我是一个提示框,我在顶部出现",

      placement:"top",

      animation:"true",

      delay:1000

    });

    

    $('#myTooltip3').tooltip({

      title:"我是一个提示框,我在底部出现",

      placement:"bottom",

      viewport:"#viewport",

    //   数字不用加引号,不然会变成字符串

    });

  });

  </script>


</body>


    

</html>


2018-12-29 源自:玩转Bootstrap(JS插件篇) 3-11 569 浏览 1 回答

感觉没有乃至这个属性的地方,

animation的效果我也没有看出在哪里.

2019-10-07
回复 0

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信