Bootstrap 是一个流行的前端框架，它提供了大量的 CSS、JS 和 HTML 组件，可以帮助开发者快速构建响应式网站。在 Bootstrap 3 中，有两个非常有用的组件——泡芙（Popover）和工具提示（Tooltip）。本文将介绍这两个组件的使用方法，并提供详细的示例代码。
泡芙（Popover）
泡芙是一种弹出式窗口，通常用于显示更多的信息或选项。在 Bootstrap 3 中，我们可以通过以下方式创建一个泡芙：
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="标题" data-content="内容"> 点我弹出 </button>
解释一下上面的代码。首先，我们创建了一个按钮，指定了其样式（btn btn-lg btn-danger）。然后，我们添加了三个 data 属性：
data-toggle="popover"表示这个按钮将触发泡芙的显示。title="标题"是泡芙的标题。data-content="内容"是泡芙的内容。
最后，我们给按钮添加了一个文本，表示用户可以点击它来弹出泡芙。
如果你想要自定义泡芙的外观和行为，可以使用 JavaScript 代码来初始化泡芙：
$(function () {
$('[data-toggle="popover"]').popover()
})这段代码使用了 jQuery，它会在页面加载完成后自动运行。它查找所有带有 data-toggle="popover" 属性的元素，并将它们转换成泡芙。
除了上面的属性之外，还有一些其他的选项可以用来控制泡芙的行为和样式。例如，你可以通过 data-placement 属性来指定泡芙的位置；或者通过 data-trigger 属性来指定弹出的事件是点击还是悬停。详细的选项请参考 Bootstrap 官方文档。
工具提示（Tooltip）
工具提示是一种小型弹出式窗口，通常用于显示简短的说明或提示。在 Bootstrap 3 中，我们可以通过以下方式创建一个工具提示：
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="这是一个提示"> 鼠标移上来看看 </button>
解释一下上面的代码。首先，我们创建了一个按钮，指定了其样式（btn btn-default）。然后，我们添加了三个 data 属性：
data-toggle="tooltip"表示这个按钮将触发工具提示的显示。data-placement="bottom"是工具提示的位置，可以是 top、right、bottom 或 left。title="这是一个提示"是工具提示的内容。
最后，我们给按钮添加了一个文本，提示用户可以将鼠标移动到它上面来查看工具提示。
同样地，如果你想要自定义工具提示的外观和行为，可以使用 JavaScript 代码来初始化工具提示：
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})这段代码与初始化泡芙的代码非常相似。它会查找所有带有 data-toggle="tooltip" 属性的元素，并将它们转换成工具提示。
除了上面的属性之外，还有一些其他的选项可以用来控制工具提示的行为和样式。例如，你可以通过 data-animation 属性来指定工具提示的动画效果；或者通过 data-container 属性来指定工具提示的容器。详细的选项请参考 [Bootstrap 官方文档](https://getbootstrap.com
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11610
