一、提示效果。
<!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>
二、弹框提示效果
<!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>