5.7　弹出框

源文件：popover.js、popovers.less

CSS文件：bootstrap.css 5302行之后

在讲述弹出框插件之前，先来看看该组件的两个运行效果，如图5-11和5-12所示。

5.7　弹出框 - 图1 图5-11　弹出框效果1

5.7　弹出框 - 图2 图5-12　弹出框效果2

有人可能会说，这不就是上一节的提示框（tooltip）插件嘛，就是样式不一样而已，可以通过template属性来定制。

是的，弹出框其实就是一种特殊的提示框，相比来说只是多了一个title标题而已，不带标题的效果2完全可以通过自定义tooltip来实现。那作者为何还提供这一个弹出框插件呢？我想，是因为两个用户体验不太一样吧，一个是提示，一个是弹出，弹出就意味着可以操作里面的内容，相对比较正式。

通过分析源码，笔者发现，两个插件只有以下两个不同点：

❑提示框的默认触发事件是hover和focus，而弹出框的默认触发事件是click。

❑提示框只有一个内容（即title），而弹出框不仅可以设置标题title，还可以设置内容content（也就是说模板不一样）。

两个插件的显示模板分别如下：

  1. // 提示框效果
  2. <div class="tooltip">
  3.     <div class="tooltip-arrow"></div>
  4.     <div class="tooltip-inner"></div>
  5. </div>
  6. // 弹出框效果
  7. <div class="popover">
  8.     <div class="arrow"></div>
  9.     <h3 class="popover-title"></h3>
  10.     <div class="popover-content"></div>
  11. </div>

至此，你应该可以看出点名堂了吧。其实popover插件就是通过继承tooltip来实现的，源码分析小节会详细讲述。