Bootstrap示例演示：bootstrap-popover.js

bootstrap-popover.js继承自bootstrap-toolbar.js，即是bootstrap-toolbar.js的子类，因此引入JS，至少引入三个JS文件：jquery.js，bootstrap-tooltip.js与bootstrap-popover.js。另外，如果需要过渡效果也可引入bootstrap-transition.js。

完整示例：

<!DOCTYPE>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-popover.js"></script>
</head>

<body>
<div class="well">
   <a id="example" href="#" class="btn btn-danger" rel="popover" data-content="他来自山东，是一名残疾人，因思想独立、指谪政弊而被政府迫害。地方政府和当权政要派专人看管他，调拨专款作为对他的看管费用，他每天都活在别人的监视和囚禁中，其遭遇只能用令人发指来形容。历尽万难，他终于成功逃离了当地，在外国使节的帮助和护送下去到了国外。他，就是孙膑。" data-original-title="他是谁">鼠标经过弹出提示</a>
</div>
</body>
</html>
<script type="text/javascript">
$('#example').popover();
</script>

注意：上面的示例需要鼠标点击才能触发，即：默认的触发事件是点击。这好像是从2.2.3版以后才是这样的。如果想要鼠标经过触发，上面的js代码可改成如下：

$('#example').popover({trigger:'hover'});

传入个参数对象，同时将触发方式参数trigger改为hover，有关更多的参数可以查看这个中文帮助：http://wrongwaycn.github.io/bootstrap/docs/javascript.html#popovers

+友情链接