bootstrap3-popover 提示框

提示内容的方向

top | bottom | left | right | auto.

4种触发方式

click | hover | focus | manual

点击|漂过|焦点|手动

应用data属性

data-placement="right"

手动初始化popover功能（bootstrap基于性能考虑，没有主动开启此功能）

$(function(){
	$("#btn_top").popover();
});

data属性可以在javascript中设置，是等效的

$(function(){
		$("#btn_top").popover();
		$("#btn_bottom").popover();
		$("#btn_left").popover();
		$("#btn_right").popover();
	});

bootstrap3-popover 提示框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet" media="screen">
<style>
body {
	padding: 50px; /*边距*/
	margin: 200px;
}
</style>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<h2>Example of creating Modal with Twitter Bootstrap</h2>
		<div class="well">
			<button type="button" id="btn_left" class="btn btn-danger" 
				data-container="body" data-toggle="popover" data-placement="left"
				data-animation="false" data-trigger="click"
				data-content="It's so simple to create a tooltop for my website!"
				data-original-title="Twitter Bootstrap Popover">
			左左左
			</button>
			<button type="button" id="btn_top" class="btn btn-danger" 
				data-container="body" data-toggle="popover" data-placement="top"
				data-animation="false" data-trigger="click"
				data-content="It's so simple to create a tooltop for my website!"
				data-original-title="Twitter Bootstrap Popover">
			上上上
			</button>
			<button type="button" id="btn_bottom" class="btn btn-danger" 
				data-container="body" data-toggle="popover" data-placement="bottom"
				data-animation="false" data-trigger="click"
				data-content="It's so simple to create a tooltop for my website!"
				data-original-title="Twitter Bootstrap Popover">
			下下下
			</button>
			<button type="button" id="btn_right" class="btn btn-danger" 
				data-container="body" data-toggle="popover" data-placement="right"
				data-animation="false" data-trigger="click"
				data-content="It's so simple to create a tooltop for my website!"
				data-original-title="Twitter Bootstrap Popover">
			右右右
			</button>
		</div>
	</div>	
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
//初始化popover
	$(function(){
		$("#btn_top").popover();
		$("#btn_bottom").popover();
		$("#btn_left").popover();
		$("#btn_right").popover();
	});
</script>
</body>
</html>