一、提示效果。



bootstrap提示和弹出框_bootstrap




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提示</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding: 200px;
}

</style>
<script type="text/javascript">
$(function (){
$("a").tooltip(); //初始化
});

</script>

</head>
<body>
<a href="#" title="这是一个按钮"
data-toggle="tooltip"
data-placement="right" //提示内容在那边

>按钮</a>
</body>
</html>

二、弹框提示效果




bootstrap提示和弹出框_javascript_02



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提示</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding: 200px;
}

</style>
<script type="text/javascript">
$(function (){

$("button").popover();
});

</script>

</head>
<body>
<button class="btn btn-primary btn-lg"
id="btn1" title="bootstrap简介"
data-html="true"
data-trigger="hover"
data-placement="top" //弹框的位置
data-content="<a href='http://www.bootcss.com/'>Bootstrap</a>
Bootstrap简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。"
>弹框</button>
</body>
</html>