效果有啥特别效果区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js bin</title>
<link rel="stylesheet" href="../../bootstrap.css">
</head>
<body>
<div id="divTest">
<h3>按钮提示框</h3>
<button type="button" class="btn btn-default" id="myTooltip1">这是我的按钮提示框</button>
<button type="button" class="btn btn-default" id="myTooltip2">这是我的按钮提示框</button>
<button type="button" class="btn btn-default" id="myTooltip3">这是我的按钮提示框</button>
<button type="button" class="btn btn-default" id="myTooltip4">这是我的按钮提示框</button>
<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>
</div>
<script src="../../jquery.min.js"></script>
<script src="../../bootstrap.min.js"></script>
<script>
$(function () {
$('#myTooltip1').tooltip({
title:"我是一个提示框啊哈哈哈哈",
placement:"top"
});
$('#myTooltip2').tooltip({
title:"我是一个delay提示框啊哈哈哈哈",
delay:{"show":"2000","hide":"1000"}
});
$('#myTooltip3').tooltip({
title:"我是一个animation提示框啊哈哈哈哈",
placement:"top",
animation:true
});
$('#myTooltip4').tooltip({
title:"我是一个html提示框啊哈哈哈哈",
placement:"top",
html:true
});
$('#myTooltip5').tooltip({
title:"我是一个trigger提示框啊哈哈哈哈",
placement:"top",
trigger:"click"
});
$('#myTooltip6').tooltip({
title:"我是一个提示框啊哈哈哈哈",
selector:true
});
$('#myTooltip7').tooltip({
title:"我是一个提示框啊哈哈哈哈",
container:'body'
});
$('#myTooltip8').tooltip({
title:"我是一个提示框啊哈哈哈哈",
plcement:"top",
viewport:'#viewport'
});
})
</script>
</body>
</html>
