前言
Bootstrap 是一个流行的 CSS 框架。它提供了很多 UI 组件，可以帮助前端开发人员快速构建各种网站和应用程序。其中之一是提示框组件（Tooltip）。
Bootstrap 4 自带了 Tooltip 组件，但是需要手动添加 JS 代码才能触发 Tooltip。而 bootstrap4-tooltip-activator 是一个 npm 包，可以很方便地激活 Tooltip。本文主要介绍如何使用 bootstrap4-tooltip-activator。
安装
安装 bootstrap4-tooltip-activator 可以通过 npm 命令：
npm install bootstrap4-tooltip-activator
使用方法
引入
先引入 Bootstrap 和 bootstrap4-tooltip-activator 的 CSS 和 JS 文件。
-- -------------------- ---- ------- ---- -- --------- --- --- ----- ---------------- --------------------------------------------------------------------- ---- -- ---------------------------- --- --- ----- ---------------- --------------------------------------------------------------------------------------- ---- -- --------- -- --- ------- --------------------------------------------------------------------------- ---- -- -------------------------------------------------------- -- --- ------- ------------------------------------------------------------------ ------- -------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------------------
HTML 结构
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" data-title="这是一个提示框">Tooltip</button>
在按钮中添加 data-toggle="tooltip" 和 data-title 属性，分别表示开启提示框和提示框中的内容。
激活 Tooltip
使用 bootstrap4-tooltip-activator 的 tooltips 函数激活 Tooltip。
$(function() {
$('[data-toggle="tooltip"]').tooltips();
});将 tooltips 函数应用到所有 data-toggle="tooltip" 的元素上即可。
配置
可以通过 tooltips 函数的选项参数配置 Tooltip。
$(function() {
$('[data-toggle="tooltip"]').tooltips({
delay: { show: 500, hide: 100 },
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});
});delay：控制 Tooltip 出现和消失的延迟时间。template：Tooltip 的 HTML 模板，可以自定义 Tooltip 的样式。
示例代码
-- -------------------- ---- -------
---- -- --------- --- ---
----- ---------------- ---------------------------------------------------------------------
---- -- ---------------------------- --- ---
----- ---------------- ---------------------------------------------------------------------------------------
---- -- --------- -- ---
------- ---------------------------------------------------------------------------
---- -- -------------------------------------------------------- -- ---
------- ------------------------------------------------------------------
------- --------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------
---- ---- -- ---
------- ------------- ---------- ------------ --------------------- ---------------------- -------------------------------------
---- -- -- ---
--------
------------ -
----------------------------------------
---
---------结束语
bootstrap4-tooltip-activator 可以让使用 Bootstrap 的开发人员更加方便地使用 Tooltip 组件。希望本文的介绍对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb281e8991b448dc562