Bootstrap/docs/4.5/components/tooltips
提示
有关使用CSS3和CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例,并使用CSS3制作动画,并使用数据属性存储本地标题。
概观
使用工具提示插件时要了解的事项：
- 工具提示依赖于第三方库 Popper.js 用于定位。 你必须包括 popper.min.js 在bootstrap.js之前或使用
bootstrap.bundle.min.js/bootstrap.bundle.js包含Popper.js以便工具提示起作用！ - 如果您是从源代码构建JavaScript, 要求
util.js. - 出于性能原因选择使用工具提示,因此 你必须自己初始化它们 .
- 标题长度为零的工具提示永远不会显示。
- 指定
container: 'body'以避免在更复杂的组件（例如我们的输入组,按钮组等）中出现渲染问题。 - 在隐藏元素上触发工具提示将不起作用。
- 的工具提示
.disabledordisabled元素必须在包装元素上触发。 - 从跨越多行的超链接触发时,工具提示将居中。 Use
white-space: nowrap;在你的<a>避免这种行为。 - 在从DOM中删除其相应元素之前,必须先隐藏工具提示。
- 借助影子DOM中的元素,可以触发工具提示。
该组件的动画效果取决于 prefers-reduced-motion 媒体查询。 见 辅助功能文档中的慢动部分 .
知道了吗？ 太好了,我们来看一些示例。
示例：随处启用工具提示
初始化页面上所有工具提示的一种方法是按其提示进行选择 data-toggle 属性：
例子
将鼠标悬停在下面的链接上可查看工具提示：
紧身裤下一级keffiyeh 你可能 还没听说过 照相亭胡须生牛仔布凸版纯素信使包stumptown。 农场到餐桌的Seitan,麦斯维尼的Fixie可持续藜麦8位美式服装 有一个 特里·理查森·乙烯基·钱布雷。 胡子stumptown,羊毛衫banh mi lomo雷猫。 豆腐生物柴油威廉·马尔法,四个loko mcsweeney的纯素食主义者chambray。 一个真正具有讽刺意味的工匠 随便什么 ,从农场到餐桌的银行,奥斯丁 推特手柄 freegan cred粗斜纹棉布单源咖啡病毒。
<p class="muted"> 紧身裤下一级keffiyeh <a data-toggle="tooltip" href="#" title="Default tooltip"> 你可能 </a> 还没听说过 照相亭胡须生牛仔布凸版纯素信使包stumptown。 农场到餐桌的Seitan,麦斯维尼的Fixie可持续藜麦8位美式服装 <a data-toggle="tooltip" href="#" title="Another tooltip"> 有一个 </a> 特里·理查森·乙烯基·钱布雷。 胡子stumptown,羊毛衫banh mi lomo雷猫。 豆腐生物柴油威廉·马尔法,四个loko mcsweeney的纯素食主义者chambray。 一个真正具有讽刺意味的工匠 <a data-toggle="tooltip" href="#" title="Another one here too"> 随便什么 </a> ,从农场到餐桌的银行,奥斯丁 <a data-toggle="tooltip" href="#" title="The last tip!"> 推特手柄 </a> freegan cred粗斜纹棉布单源咖啡病毒。 </p>将鼠标悬停在下面的按钮上可以查看四个工具提示的方向：顶部,右侧,底部和左侧。
<div class="bd-example-tooltips">
<button class="btn btn-secondary" data-placement="top" data-toggle="tooltip" title="Tooltip on top" type="button"> 顶部的工具提示 </button>
<button class="btn btn-secondary" data-placement="right" data-toggle="tooltip" title="Tooltip on right" type="button"> 右侧的工具提示 </button>
<button class="btn btn-secondary" data-placement="bottom" data-toggle="tooltip" title="Tooltip on bottom" type="button"> 底部的工具提示 </button>
<button class="btn btn-secondary" data-placement="left" data-toggle="tooltip" title="Tooltip on left" type="button"> 左侧的工具提示 </button>
<button class="btn btn-secondary" data-html="true" data-toggle="tooltip" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" type="button"> HTML的工具提示 </button>
</div>并添加了自定义HTML：
用法
工具提示插件可按需生成内容和标记,默认情况下将工具提示放置在其触发元素之后。
通过JavaScript触发工具提示：
溢出 auto and scroll
当父容器具有以下内容时,工具提示位置会尝试自动更改 overflow: auto or overflow: scroll 像我们 .table-responsive ,但仍保持原始展示位置。 要解决此问题,请设置 boundary 可以选择默认值以外的任何选项, 'scrollParent' , 如 'window':
标记
工具提示所需的标记仅为 data 属性和 title 您希望在HTML元素上有一个工具提示。 工具提示的生成标记相当简单,尽管它确实需要位置（默认情况下,设置为 top 通过插件）。
使工具提示对键盘和辅助技术用户有效
您只应向传统上以键盘为焦点且具有交互性的HTML元素（例如链接或表单控件）添加工具提示。 尽管任意HTML元素（例如 <span> s）可以通过添加 tabindex="0" 属性,这将为键盘用户在非交互式元素上添加潜在的令人讨厌和令人困惑的制表位,并且在这种情况下,大多数辅助技术目前都不会宣布工具提示。 此外,不要仅仅依靠 hover 作为工具提示的触发器,因为这将使键盘用户无法触发工具提示。
禁用元素
与元素 disabled 属性不是交互式的,这意味着用户无法聚焦,悬停或单击它们来触发工具提示（或弹出窗口）。 解决方法是,您需要从包装器触发工具提示 <div> or <span> ,最适合使用 tabindex="0" ,并覆盖 pointer-events 在禁用元素上。
<span class="d-inline-block" data-toggle="tooltip" tabindex="0" title="Disabled tooltip">
<button class="btn btn-primary" disabled="" style="pointer-events: none;" type="button"> 禁用按钮 </button>
</span>选项
可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到 data- ,如 data-animation="".
请注意,出于安全原因, sanitize,sanitizeFn and whiteList 选项不能使用数据属性提供。
| Name | Type | 默认 | 描述 |
|---|---|---|---|
| 动画 | 布尔 | true | 将CSS淡入淡出过渡应用于工具提示 |
| 容器 | 假 | 假 | 将工具提示附加到特定元素。 例： container: 'body' 。此选项特别有用,因为它允许您将工具提示放置在文档流中靠近触发元素的位置-这将防止工具提示在调整窗口大小时从触发元素浮离。
|
| 延迟 | 编号目的 | 0 |
延迟显示和隐藏工具提示（ms）-不适用于手动触发类型 如果提供了数字,则延迟会同时应用于隐藏/显示 对象结构是： |
| html | 布尔 | 假 |
在工具提示中允许HTML。 如果为true,则工具提示中的HTML标签 如果您担心XSS攻击,请使用文本。 |
| 放置 | 字符串功能 | '最佳' |
如何放置工具提示-自动|顶部|底部|左|对。 当使用函数确定放置位置时,将以工具提示DOM节点作为第一个参数,并以触发元素DOM节点作为第二个参数来调用它。 The |
| 选择 | 字符串假 | 假 | 如果提供了选择器,则工具提示对象将委派给指定的目标。 实际上,这还用于将工具提示应用于动态添加的DOM元素（ jQuery.on 支持）。 See this and 一个信息丰富的例子 .
|
| 模板 | 串 | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
|
创建工具提示时要使用的基本HTML。 工具提示的
最外层的包装元素应具有 |
| 标题 | 功能 |
默认标题值,如果 如果给出了一个函数,它将被调用 | |
| 触发 | 串 | “悬停焦点” |
工具提示的触发方式-单击|悬停|重点手册。 您可以传递多个触发器；用空格分隔它们。
|
| 抵销 | 编号字符串功能 | 0 |
工具提示相对于其目标的偏移量。 当使用函数确定偏移量时,将使用包含偏移量数据的对象作为其第一个参数调用该函数。 该函数必须返回具有相同结构的对象。 触发元素DOM节点作为第二个参数传递。 有关更多信息,请参阅Popper.js的 偏移文档 . |
| fallbackPlacement | 字符串数组 | “翻转” | 允许指定Popper在回退时将使用的位置。 Popper.js的 行为文档 |
| 边界 | 字符串元件 | 'scrollParent' | 工具提示的溢出约束边界。 接受的值 'viewport','window','scrollParent' ,或HTMLElement引用（仅JavaScript）。 有关更多信息,请参阅Popper.js的 preventOverflow文档 .
|
| 消毒 | 布尔 | true | 启用或禁用清理。 如果激活 'template' and 'title' 选项将被清理。
|
| 白名单 | 宾语 | 默认值 | 包含允许的属性和标签的对象 |
| 消毒 | 功能 | null | 在这里您可以提供自己的清理功能。 如果您更喜欢使用专用库来执行清理操作,那么这将很有用。 |
| popperConfig | 目的 | null | 要更改Bootstrap的默认Popper.js配置,请参阅 Popper.js的配置 |
各个工具提示的数据属性
如上所述,可以单独使用数据属性指定各个工具提示的选项。
方法
异步方法和转换
所有API方法都是 异步 然后开始 过渡 。转换开始后,他们会立即返回给呼叫者,但 在结束之前 。此外,在 过渡组件将被忽略 .
$().tooltip(options)
将工具提示处理程序附加到元素集合。
.tooltip('show')
显示元素的工具提示。 在实际显示工具提示之前返回到调用者 （即 之前 shown.bs.tooltip 事件发生）。 这被认为是工具提示的“手动”触发。 标题长度为零的工具提示永远不会显示。
.tooltip('hide')
隐藏元素的工具提示。 在工具提示实际被隐藏之前返回到调用者 （即 之前 hidden.bs.tooltip 事件发生）。 这被认为是工具提示的“手动”触发。
.tooltip('toggle')
切换元素的工具提示。 在工具提示实际显示或隐藏之前返回调用者 （即 之前 shown.bs.tooltip or hidden.bs.tooltip 事件发生）。 这被认为是工具提示的“手动”触发。
.tooltip('dispose')
隐藏和销毁元素的工具提示。 使用委派的工具提示（使用 the selector 选项 ）无法在后代触发元素上单独销毁。
.tooltip('enable')
为元素的工具提示提供显示的功能。 默认情况下启用工具提示。
.tooltip('disable')
删除了显示元素工具提示的功能。 重新启用后,才能显示工具提示。
.tooltip('toggleEnabled')
切换显示或隐藏元素工具提示的功能。
.tooltip('update')
更新元素工具提示的位置。
活动
| 事件类型 | 描述 |
|---|---|
| show.bs.tooltip | 当 show 实例方法被调用。
|
| 显示的.bs.tooltip | 当工具提示对用户可见时将触发此事件（将等待CSS转换完成）。 |
| hide.bs.tooltip | 当 hide 实例方法已被调用。
|
| hidden.bs.tooltip | 当工具提示已向用户隐藏时将触发此事件（将等待CSS转换完成）。 |
| insert.bs.tooltip | 此事件在 show.bs.tooltip 工具提示模板已添加到DOM中时发生的事件。
|
