viewport沒生效?
<!DOCTYPE HTML>
<html>
<head>
? <meta charset="utf-8">
? <title>JS Bin</title>
? <link rel="stylesheet" >
? <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:"我是一個提示框,我在頂部出現(xiàn)",
? ? ? placement:"top",
? ? ? animation:"true"
? ? });
? ??
? ? $('#myTooltip1').tooltip({
? ? ? title:"我是一個提示框,我在頂部出現(xiàn)",
? ? ? placement:"top",
? ? ? animation:"true",
? ? ? delay:1000
? ? });
? ??
? ? $('#myTooltip3').tooltip({
? ? ? title:"我是一個提示框,我在底部出現(xiàn)",
? ? ? placement:"bottom",
? ? ? viewport:"#viewport",
? ? //? ?數(shù)字不用加引號,不然會變成字符串
? ? });
? });
? </script>
</body>
? ??
</html>
2019-10-07
感覺沒有乃至這個屬性的地方,
animation的效果我也沒有看出在哪里.