<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" />
<title></title>
</head>
<body>
<!--
作者：百宝箱工作室 微课堂教学QQ：425680248
时间：2018-04-14
描述：提示框
提示框含有标题和内容，标题写在标签的title属性值里面，内容写在标签的data-content属性值里面。
data-toggle="popover" 这个属性是与js交互用的，但我个人认为这个属性是可选的，不是必须的。
data-placement="top" 提示框出现在上方
data-placement="bottom" 提示框出现在下方
data-placement="left" 提示框出现在左边
data-placement="right" 提示框出现在右边
提示框的js事件需要手动触发，也就是要在bootstrap.js文件后面增加下面这行代码才能触发js事件：
$('.btn').popover(); 这行代码表示class为btn的标签显示提示框
如果有需求在网页加载后，一直到手动触发js的popover事件前，让提示框一直显示，需要用下方这行代码：
$('.btnshow').popover('show'); 这行代码表示class为btnshow的标签在浏览器加载网页之后一直显示提示框
-->
<div class="container">
<div class="row" style="margin-top: 100px;">
<button class="btn btn-primary" data-placement="top" title="弹出框的标题" data-content="弹出框的内容，内容可以很长">演示在上方弹出框</button>
</div>
<div class="row" style="margin-top: 50px;margin-left: 100px;">
<button class="btn btn-primary" data-placement="left" title="弹出框的标题" data-content="弹出框的内容，内容可以很长">演示在左边弹出框</button>
</div>
<div class="row" style="margin-top: 50px;">
<button class="btn btn-primary" data-toggle="popover" data-placement="right" title="弹出框的标题" data-content="弹出框的内容，内容可以很长">演示在右边弹出框</button>
</div>
<div class="row" style="margin-top: 10px;">
<button class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="弹出框的标题" data-content="弹出框的内容，内容可以很长">演示在下方弹出框</button>
</div>
<div class="row" style="margin-top: 90px;">
<button class="btn btn-primary btnshow" data-toggle="popover" data-placement="bottom" title="弹出框的标题" data-content="弹出框的内容，内容可以很长">演示在下方弹出框</button>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script>
<!--这行代码表示class为btn的标签显示提示框-->
$('.btn').popover();
<!--这行代码表示class为btnshow的标签在浏览器加载网页之后一直显示提示框-->
$('.btnshow').popover('show');
</script>
</body>
</html>
