Bootstrap 弹出框，Popover插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似，提供了一个扩展的视图，用户只需要把鼠标指针悬停到元素上面即可。弹出框的内容完全由Bootstrap Data API来填充。
用法
弹出框插件根据需要生成内容或标记，默认情况下把弹出框(Popover)放在它们触发元素的后面，您可以有两种方法来启动弹出框
1、通过data属性：如需要添加一个弹出框，只需要向锚或按钮添加一个data-toggle="popover"即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div >
<button type="button" class="btn btn-default" data-toggle="popover"data-placement="left"data-content="左则popover中的一些内容"title="popover title">左则的popover</button>
<button type="button" class="btn btn-success"data-toggle="popover"data-placement="right"data-content="右则popover中的一些内容"title="popover title">右则popover中的一些内容</button>
<button type="button" class="btn btn-primary"data-toggle="popover"data-placement="top"data-content="顶部popover中的一些内容"title="popover title">顶部popover中的一些内容</button>
<button type="button"class="btn btn-info"data-toggle="popover"data-placement="bottom"data-content="底部popover中的一些内容"title="popover title">底部popover中的一些内容</button>
</div>
<script>
$("button[data-toggle='popover']").popover();
</script>
</body>
</html>
相关推荐
关于Bootstrap的悬浮窗口，popover
源码
时间：2024-03-30 02:04
