BootStrap-CSS样式_插件_弹出框（Popover）插件

弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。如果您想要单独引用该插件的功能，那么您需要引用 popover.js，它依赖于工具提示（Tooltip）插件。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：

1.通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

<a href="#" data-toggle="popover" title="Example popover"> 
请悬停在我的上面 
</a>

2.通过 JavaScript：通过 JavaScript 启用弹出框（popover）：

$('#identifier').popover(options)

重点

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

$(function () { $("[data-toggle='popover']").popover(); });

选项

有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：

下面是一些弹出框（Popover）JS插件中有用的方法：

事件

下表列出了弹出框（Popover）插件中要用到的事件：

代码实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>弹出框（Popover）插件</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container" style="padding:150px">
        <div class="col-xs-3">
            <ul class="nav nav-pills nav-stacked">
                <li><button type="button" id="xiaofeifei" class="btn btn-success">调用飞飞弹出框显示</button></li>
                <li><button type="button" id="xiaolele" class="btn btn-primary">调用乐乐弹出框显示</button></li>
                <li><button type="button" id="show" class="btn btn-danger">显示所有popover.Show</button></li>
                <li><button type="button" id="hide" class="btn btn-warning">隐藏所有popover.Hide</button></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <ul>
                <!-- data-toggle="popover":定义弹出框插件，鼠标点击显示title属性标题和data-content属性内容，再次点击隐藏
                title="*":填写显示弹出框标题
                data-content="*":填写显示弹出框内容
                data-placement="":top、left、right、bottom分别定义弹出框显示方向
                class="popover-html":title属性内可以写入HTML代码 -->
                <li>这是一个 <a href="#" class="popover-top" data-toggle="popover" data-placement="top" title="上方显示popover小飞飞" data-content="<h4>Popover 中的一些内容 ——弹出框、弹出框、弹出框、弹出框弹出框</h4>">小飞飞弹出框</a></li>
                <li>这是一个 <a href="#" class="popover-left" data-toggle="popover" data-placement="left" title="左方显示popover小喵喵" data-content="<h4>Popover 中的一些内容 ——弹出框、弹出框、弹出框、弹出框弹出框</h4>">小喵喵弹出框</a></li>
                <li>这是一个 <a href="#" class="popover-right" data-toggle="popover" data-placement="right" title="左方显示popover小猪猪" data-content="<h4>Popover 中的一些内容 ——弹出框、弹出框、弹出框、弹出框弹出框</h4>">小猪猪弹出框</a></li>
                <li>这是一个 <a href="#" class="popover-bottom" data-toggle="popover" data-placement="bottom" title="下方显示popover小乐乐" data-content="<h4>Popover 中的一些内容 ——弹出框、弹出框、弹出框、弹出框弹出框</h4>">小乐乐弹出框</a></li>
                <br><br><br>
                <li>这是一个放大的 <a href="#" class="popover-html-title" data-toggle="popover" title="<h4>包裹h4中、俺只有标题，没有内容</h4>">popover 方法 options</a></li>
                <br><br><br>
                <li>这是一个放大的 <a href="#" class="popover-html-conten" data-toggle="popover" data-content="<h5>包裹h4中、俺只有内容，没有标题</h5>">popover 方法 options</a></li>
            </ul>
        </div>
    </div>
</body>
<script>
    $(function () {
        // 使用popover必须JS先调用$("").popover()
        // $("[data-toggle='popover']").popover();
        // html:true?false 标题title属性中，true-可以写入HTML代码,false-禁用HTML代码
        // show:500:延迟500秒显示
        // show:500:延迟500秒隐藏
        //$("[data-toggle='popover']").popover({html:true});
        $("[data-toggle='popover']").popover({html:true,delay:{show:500,hide:500}});
        //显示小飞飞弹出框
        $("#xiaofeifei").click(function(){
             $('.popover-top').popover('show');
        })
        //显示小乐乐弹出框
        $("#xiaolele").click(function(){
             $('.popover-bottom').popover('show');
        })
        //显示所有弹出框
        $("#show").click(function(){
             $('a').popover('show');
        })
        //隐藏所有弹出框
        $("#hide").click(function(){
             $('a').popover('hide');
        })
        
        $("[data-toggle='popover']").on("show.bs.popover",function(){
            //popover('show')显示之前执行事件
            console.info("show.bs.popover");
        }).on("shown.bs.popover",function(){
            //popover('show')显示之前执行事件
            console.info("shown.bs.popover");
        }).on("hide.bs.popover",function(){
            //popover('hide')显示之前执行事件
            console.info("hide.bs.popover");
        }).on("hidden.bs.popover",function(){
             //popover('hide')显示之前执行事件
            console.info("hidden.bs.popover");
        });
    });
</script>
</html>

显示效果：