<!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>
感觉没有乃至这个属性的地方,
animation的效果我也没有看出在哪里.