---

Bootstrap 弹出框（Popover）插件是一款基于jQuery的工具，它可以让用户通过单击或鼠标悬浮来显示或隐藏一系列的内容。

使用方法

为了使用此插件，我们需要先引入Bootstrap和jQuery插件，然后通过设置正确的属性和数据来激活弹出框。设置属性的方法如下：

<a href="#" data-toggle="popover" title="title" data-content="content">Click me</a>

通过上述代码，我们可以在任何包含"href"属性的元素上都使用此插件。当用户单击这个元素时，弹出框就会显示。

数据选项

此插件提供了几个属性可以控制展示内容：

1. title：弹出框的标题。

2. content：弹出框的内容。

3. data-trigger：弹框出现的触发方式，可以选择"click"或"hover"。

4. data-placement：指定弹出框出现的位置，可以选择"top"、“bottom”、“left"或"right”。

5. data-html：指示是否需要在弹出框中显示HTML元素。

6. data-template：指定弹出框的HTML结构。

具体实现方式如下：

<a href="#" 
   data-toggle="popover" 
   data-trigger="hover"
   data-placement="right"
   data-html="true"
   title="<h3>title</h3>"
   data-content="<p>content</p>">Click Me</a>

方法调用

通过设置 “data-trigger” 属性为 “manual”，可以通过编程方式调用弹出框的显示和隐藏。

$('[data-toggle="popover"]').popover('show'); // 显示弹出框
$('[data-toggle="popover"]').popover('hide'); // 隐藏弹出框

事件监听

此插件提供了一些事件来监听弹出框的显示和隐藏：

1. show.bs.popover：当弹出框正在显示时触发。

2. shown.bs.popover：当弹出框已显示时触发。

3. hide.bs.popover：当弹出框正在隐藏时触发。

4. hidden.bs.popover：当弹出框已隐藏触发。

这些事件可以通过以下方式来监听和处理：

$('[data-toggle="popover"]').on('hidden.bs.popover', function() {
    // do something...
});

结论

Bootstrap 弹出框插件可以用于各种不同的交互场景，比如提示用户相关信息、用于弹出确认消息等。此插件提供了灵活的选项来控制弹出框的属性和事件监听，并且可以通过编程方式管理和显示弹出框。