Bootstrap 弹出框

Bootstrap 的弹出框（Popover）插件能在点击或悬停元素时，弹出一个带小箭头的气泡。与提示工具相比，弹出框支持"标题 + 正文"两层内容，正文还能嵌入 HTML，适合做"查看详情""字段说明"这类交互提示。

初始化插件

弹出框依赖提示工具插件，先引入 jQuery 与 bootstrap.min.js，再用一行代码初始化页面上的所有弹出框：

<button type="button" class="btn btn-primary" data-toggle="popover"
        title="弹出框标题" data-content="这里是正文内容">
  点我查看
</button>
<script>
  $(function () {
    $('[data-toggle="popover"]').popover();   // 初始化所有弹出框
  });
</script>

说明：页面中点击按钮后，按钮上方会弹出一个气泡，顶部是标题、下方是正文，气泡尖端指向按钮；再次点击气泡消失。

控制弹出方向

通过 data-placement 指定气泡出现位置，可选 top、bottom、left、right，默认是 top：

<button type="button" class="btn btn-info" data-toggle="popover"
        data-placement="right" title="提示"
        data-content="我出现在按钮的右侧">
  右侧弹出
</button>

效果：点击后气泡出现在按钮右侧，箭头朝左指向按钮。

用对象配置更多选项

需要动态内容或 HTML 正文时，初始化时传入对象参数更灵活：

<script>
  $('#myPop').popover({
    placement: 'bottom',     // 在下方显示
    trigger: 'hover',        // 鼠标悬停即显示，移开即消失
    title: '购物小贴士',
    content: '<b>满 99 元</b>免运费',
    html: true               // 允许正文解析 HTML
  });
</script>

说明：trigger 可取 click（默认）、hover、focus；html 设为 true 后，content 里的标签才会被解析为样式而不是纯文本。

手动控制显示与隐藏

除了用户触发，还可以调用方法：show 显示、hide 隐藏、toggle 切换、destroy 销毁实例：

<script>
  $('#btnNext').click(function () {
    $('#myPop').popover('show');   // 代码强制弹出
  });
</script>

小结：弹出框 = 触发元素上的 data 属性 + 一次 jQuery 初始化；方向用 data-placement 控制，复杂需求用对象配置 html 与 trigger，即可实现图文并茂的悬停或点击提示。