百度哥
2017-04-25 18:52
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>触发提示框方法</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style id="jsbin-css">
body {
padding: 100px;
}
.btn {
margin: 20px 10px 20px;
}
</style>
</head>
<body>
<h3>按钮做的提示框</h3>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="left"
data-original-title="提示框居左"
title="">
提示框居左
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="top"
data-original-title="提示框在顶部">
提示框在顶部
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="提示框在底部">
提示框在底部
</button>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="right"
data-original-title="提示框居右">
提示框居右
</button>
<h3>链接制作的提示框</h3>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="left"
title="提示框居左">
提示框居左
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="top"
title="提示框在顶部">
提示框在顶部
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="bottom"
title="提示框在底部">
提示框在底部
</a>
<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="right"
title="提示框在居右">
提示框居右
</a>
<a href="##"
class="btn btn-primary"
id="myTooltip">
我是提示框
</a>
<a href="##"
class="btn btn-primary"
id="myTooltip2">
我是提示框2
</a>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
$('#myTooltip').tooltip({
title:"我是一个提示框,我在顶部出现",
placement:'top'
});
});
</script>
</body>
</html>
这是个缺陷
popover弹出界面会导致整个界面包括背景页面的滑动
玩转Bootstrap(JS插件篇)
128657 学习 · 296 问题
相似问题