Bootstrap系列之工具提示框（Tooltips）

置顶老__L

已于 2023-01-02 19:12:40 修改

阅读量8k

点赞数 3

文章标签： bootstrap html 前端

于 2022-06-18 23:16:02 首次发布

本文链接：https://blog.csdn.net/weixin_62277266/article/details/125350770

版权

本文详细介绍了如何在页面上启用Bootstrap工具提示，包括全局启用、HTML元素的标记、禁用元素处理、选项配置以及各种API方法的使用，如显示、隐藏、切换和事件监听。适合开发者深入理解并应用此功能。

摘要由CSDN通过智能技术生成

使用CSS和JavaScript添加自定义Bootstrap工具提示，使用CSS3动画和本地标题存储的数据属性的文档和示例。

1、概述

使用tooltip插件时需要知道的事情

工具提示依赖于第三方库Popper进行定位。你必须在bootstrap.js之前包含popper .min.js或使用bootstrap.bundle.min.js/bootstrap.bundle.js，其中包含Popper以便工具提示工作；
如果您从源代码构建我们的JavaScript，它需要util.js。
出于性能原因，工具提示是可选择的，因此您必须自己初始化它们。
标题长度为零的工具提示永远不会显示
指定container:'body'以避免在更复杂的组件(如输入组、按钮组等)中呈现问题。
触发隐藏元素的提示将不起作用。
disabled或disabled元素的工具提示必须在包装器元素上触发。
当从跨越多行的超链接触发时，工具提示将居中。使用white-space:nowrap;}在<a>上避免此行为。
工具提示必须在它们对应的元素从DOM中移除之前隐藏起来。
由于阴影DOM中的一个元素，工具提示可以被触发。

默认情况下，该组件使用内置的内容杀毒程序，它会删除不被显式允许的任何HTML元素。
该组件的动画效果依赖于preferred -reduced-motion media查询。

得到了所有吗?很好，让我们通过一些例子来看看它们是如何工作的。

2、Example: Enable tooltips everywhere

初始化页面上所有工具提示的一种方法是通过它们的data-toggle属性来选择它们

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

3、示例

将鼠标悬停在下面的链接上，可以看到工具提示
在这里插入图片描述
将鼠标悬停在下面的按钮上，可以看到四个工具提示方向:顶部、右侧、底部和左侧。

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

在这里插入图片描述
并且添加了自定义HTML

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

4、用法

工具提示插件根据需要生成内容和标记，并默认将工具提示放置在触发器元素之后。

通过JavaScript触发工具提示

$('#example').tooltip(options)

Overflow auto and scroll
当父容器overflow:auto或overflow: scroll时，工具提示位置尝试自动改变，就像我们的.table-responsive一样，但仍然保持原来的放置位置。要解决这个问题，请将边界选项设置为除默认值'scrollParent'以外的任何值，例如'window'
$('#example').tooltip({ boundary: 'window' })

4.1、Markup

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

让工具提示为键盘和辅助技术用户工作
您应该只将工具提示添加到传统的键盘聚焦和交互的HTML元素(如链接或表单控件)。尽管通过添加tabindex="0"属性可以使任意HTML元素(例如<span>)可聚焦，但这将为键盘用户在非交互式元素上添加潜在的恼人和令人困惑的标签，目前大多数辅助技术在这种情况下不会宣布工具提示。此外，不要仅仅依赖悬停作为工具提示的触发器，因为这将使你的工具提示无法被键盘用户触发。

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

4.2、禁用元素

具有禁用属性的元素不具有互动性，这意味着用户不能聚焦、悬停或单击它们来触发工具提示(或弹出窗口)。作为一种解决方案，您可能希望从包装器<div>或<span>触发工具提示，理想情况下使用tabindex="0"使其可用于键盘聚焦，并覆盖禁用元素上的指针事件。

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

在这里插入图片描述

4.3、选项

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到data-，如data-animation=""。

注意，出于安全原因，不能使用数据属性提供sanitize, sanititizefn和whiteList选项。

在这里插入图片描述

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

4.4、方法

异步方法和转换
所有API方法都是异步的，并开始转换。它们在转换开始后立即返回给调用者，但在转换结束前返回。此外，对转换组件的方法调用将被忽略。

4.4.1、$().tooltip(options)

将工具提示处理程序附加到元素集合。

4.4.2、.tooltip(‘show’)

显示一个元素的工具提示。在工具提示实际显示之前返回给调用者(即在shown.bs.tooltip事件发生之前)。这被认为是工具提示的手动触发。标题长度为零的工具提示永远不会显示。

$('#element').tooltip('show')

4.4.3、.tooltip(‘hide’)

隐藏元素的工具提示。在工具提示被隐藏之前返回给调用者(即hidden.bs.tooltip事件发生之前)。这被认为是工具提示的手动触发。

$('#element').tooltip('hide')

4.4.4、.tooltip(‘toggle’)

切换元素的工具提示。在工具提示实际显示或隐藏之前返回给调用者(即在shown.bs.tooltip或hidden.bs.tooltip事件发生之前)。这被认为是工具提示的手动触发。

$('#element').tooltip('toggle')

4.4.5、.tooltip(‘dispose’)

隐藏和销毁一个元素的工具提示。使用委托(使用选择器选项创建)的工具提示不能在后代触发器元素上单独销毁。

$('#element').tooltip('dispose')

4.4.6、.tooltip(‘enable’)

为元素的工具提示提供显示的功能。工具提示默认是启用的。

$('#element').tooltip('enable')

4.4.7、.tooltip(‘disable’)

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

$('#element').tooltip('disable')

4.4.8、.tooltip(‘toggleEnabled’)

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

$('#element').tooltip('toggleEnabled')

4.4.9、.tooltip(‘update’)

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

$('#element').tooltip('update')

4.5、事件

在这里插入图片描述

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！