Bootstrap工具提示

Bootstrap工具提示（Tooltips）是一种常用的交互性组件，用于提供对元素的简短解释或补充信息。它以浮动的气泡形式展示，当用户将鼠标悬停在一个元素上时，或通过触摸屏点击元素时，工具提示会显示出来。Bootstrap工具提示可以通过CSS和JavaScript来实现。

一、概述

使用工具提示插件时应注意的事项：

• 工具提示依赖于第三方库Popper进行定位。必须在bootstrap.js之前包含popper.min.js，或者使用bootstrap.bundle.min.js/bootstrap.bundle.js，其中包含popper，这样工具提示才能工作；
• 由于性能原因，工具提示是可选的，因此必须自己初始化它们；
• 标题长度为零的工具提示永远不会显示；
• 指定container:’body’以避免在更复杂的组件（如输入组、按钮组等）中呈现问题；
• 在隐藏元素上触发工具提示将不起作用；
• .disabled或disabled元素的工具提示必须在包装器元素上触发；
• 当从跨多行的超链接触发时，工具提示将居中显示。使用空白：nowrap；以避免这种行为；
• 在从DOM中删除相应的元素之前，必须隐藏工具提示；
• 由于阴影DOM中的元素，可以触发工具提示。

注意：

• 默认情况下，此组件使用内置的内容清理器，该清理器将删除任何不明确允许的HTML元素；
• 该组件的动画效果取决于偏好减少的运动媒体查询。请参阅我们的可访问性文档的简化运动部分。

二、在各处用工具提示

初始化页面上所有工具提示的一种方法是通过数据属性选择它们：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})

三、基本示例

将鼠标悬停在以下链接上可查看工具提示：

将鼠标悬停在下面的按钮上可以看到四个工具提示方向：顶部、右侧、底部和左侧。在RTL中使用 Bootstrap时，方向是镜像的。

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>

添加自定义HTML：

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>

使用SVG:

四、用法

工具提示插件按需生成内容和标记，默认情况下，将工具提示放在触发器元素之后。

通过JavaScript触发工具提示：

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

溢出自动和滚动：当父容器发生溢出时，工具提示位置尝试自动更改：自动或溢出：像.table一样滚动，但仍保持原始位置的位置。若要解析，请将边界选项设置为除默认值“scrollParent”以外的任何值，例如“window”：

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: 'window'
})

1、标记

工具提示所需的标记只是希望具有工具提示的HTML元素的数据属性和标题。工具提示的生成标记相当简单，尽管它确实需要一个位置（默认情况下，由插件设置为top）。

<!-- HTML to write -->
<a href="#" rel="external nofollow"  data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>

2、禁用的元素

具有disabled属性的元素不是交互式的，这意味着用户不能聚焦、悬停或单击它们来触发工具提示（或popover）。作为一种解决方法，需要从包装器div或span触发工具提示，最好使用tabindex=“0”使键盘可聚焦。

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

3、选项

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到data-bs-，如data-bs-animation=””中所示。在传递数据属性时，请确保将选项名称的case类型从camelCase更改为kebab case。例如：不要使用数据data-bs-customClass=”beautifier”，而是使用数据 data-bs-custom-class=”beautifier”。

注意：出于安全原因，不能使用数据属性提供sanitize、sanitizeFn和allowList选项。

也可以通过使用数据属性来指定单个工具提示的选项，如上所述。

4、popperConfig和函数一起使用

var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})

五、方法

异步方法和转换：所有API方法都是异步的，并开始转换。转换一开始就返回到调用方，但在转换结束之前返回。此外，对转换组件的方法调用将被忽略。

1、显示

显示元素的工具提示。在工具提示实际显示之前（即，在show.bs.tooltip事件发生之前）返回调用方。这被认为是工具提示的“手动”触发。标题长度为零的工具提示永远不会显示。

tooltip.show()

2、隐藏

隐藏元素的工具提示。在工具提示实际隐藏之前（即在hidden.bs.tooltip事件发生之前）返回调用方。这被认为是工具提示的“手动”触发。

tooltip.hide()

3、切换

切换元素的工具提示。在工具提示实际显示或隐藏之前（即，在Showed.bs.tooltip或hidden.bs.tooltip事件发生之前）返回调用方。这被认为是工具提示的“手动”触发。

tooltip.toggle()

4、注销

隐藏和销毁元素的工具提示（删除DOM元素上存储的数据）。使用委派（使用选择器选项创建）的工具提示不能在子触发器元素上单独销毁。

tooltip.dispose()

5、启用

使元素的工具提示能够显示。默认情况下启用工具提示。

tooltip.enable()

6、禁用

取消显示元素工具提示的功能。工具提示只有在重新启用时才能显示。

tooltip.disable()

7、启用切换

切换显示或隐藏元素工具提示的功能。

tooltip.toggleEnabled()

8、更新

更新元素工具提示的位置。

tooltip.update()

9、获取实例

静态方法，该方法允许获取与DOM元素关联的工具提示实例

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

六、事件

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()