提示冒泡
在文档和例子中添加自定义Bootstrap提示工具与CSS3 和 在JavaScript中使用CSS3动画和 data-bs-attributes 本地存储标题。更新于: 2023-04-30 14:28:21 查看: 529
发布于: 2021-9-6 21:22 发布者: 大米
概述
使用提示工具插件时需知:
- 由于性能原因,提示工具是可选择的, 所以您必须自己初始化它们。
- 标题长度为零的提示工具永远不会显示。
- 在隐藏元素上触发提示工具不起作用。
-
.disabled
或disabled
元素的提示工具必须在包装器元素上触发。 - 当从跨越多行的超链接触发时,提示工具将居中。在您的
<a>
上使用white-space: nowrap;
;以避免这种行为。 - 在相应的元素从DOM中移除之前,提示工具必须被隐藏。
- 提示工具可以通过阴影DOM中的元素触发。
指定 container: 'body'
,以避免在更复杂的组件(如输入组、按钮组等)中出现渲染问题。
启用提示工具
初始化页面上所有提示工具的一种方法是通过data-bs-toggle
属性选择它们:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
示例
将鼠标悬停在下面的链接上查看提示工具:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
将鼠标悬停在下面的按钮上,可以看到四个提示工具说明:上、右、下和左。在RTL中使用引导时,方向是反向的。
<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)
禁用元素
具有 disabled
属性的元素是不可交互的,这意味着用户不能聚焦、悬停或单击它们来触发提示工具(或弹出窗口)。有一种解决方法, 您需要从 <div>
或 <span>
容器触发提示工具,最好使用 tabindex="0"
使键盘可聚焦,并覆盖禁用元素上的 pointer-events
。
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
选项可以通过数据属性或JavaScript传递。对于数据属性,将选项名追加到 data-bs-
,如 data-bs-animation=""
。
sanitize
,sanitizeFn
和 allowList
选项。
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
animation |
boolean | true |
应用一个CSS淡入过渡到提示工具 |
container |
string | element | false | false |
将提示工具附加到特定元素。示例: |
delay |
number | object | 0 |
延迟显示和隐藏提示工具(ms) -不适用于手动触发类型 如果一个数字被提供,延迟应用于隐藏/显示
对象结构是: |
html |
boolean | false |
在提示工具中允许HTML。
如果为true,提示工具的 如果您担心XSS攻击,请使用文本。 |
placement |
string | function | 'top' |
如何定位提示工具- - auto | top | bottom | left | right。 当指定了auto时,它将动态地重新定位提示工具。
当一个函数被用来确定位置时,它被提示工具DOM节点作为第一个参数调用,触发元素DOM节点作为第二个参数调用。 |
selector |
string | false | false |
如果提供了选择器,提示工具对象将被委托给指定的目标。在实践中,这也用于将提示工具应用于动态添加的DOM元素( jQuery.on 支持)。
请参阅
此示例和
一个信息丰富的示例。
|
template |
string |
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
创建提示工具时使用的基本HTML。
提示工具的
最外层的包装器元素应该具有 |
title |
string | element | function | '' |
默认的标题值,如果
如果给定了一个函数,它将被调用,并将其 |
trigger |
string | 'hover focus' |
如何触发提示工具 -click | hover | focus | manual。可以传递多个触发器;用空格分隔它们。
|
fallbackPlacement |
null | array | null |
允许指定Popper在回退时使用的位置。更多信息请参考Popper的 behavior 文档 |
boundary |
string | element | 'clippingParents' |
提示工具的溢出约束边界。默认情况下,它是 'clippingParents' ,
可以接受HTMLElement引用(仅限JavaScript)。更多信息请参考Popper的
preventOverflow 文档。
|
customClass |
string | function | '' |
显示时将类添加到提示工具中。请注意,这些类将添加到模板中指定的任何类之外。要添加多个类,请用空格 您还可以传递一个函数,该函数应该返回包含其他类名的单个字符串。
|
sanitize |
boolean | true |
开启/关闭消毒。如果激活 'template' 和 'title' 选项将被消毒。
|
allowList |
object | Default value | 该对象包含允许的属性和标记 |
sanitizeFn |
null | function | null |
在这里,您可以提供自己的清理功能。如果您更喜欢使用专用库来执行清理工作,这可能会很有用。 |
popperConfig |
null | object | null |
要更改Bootstrap的默认Popper配置,请参见 Popper的配置 |
方法
显示
显示元素的提示工具。在提示工具实际显示之前返回给调用者(即在 shown.bs.tooltip
事件发生之前)。这被认为是提示工具的“手动”触发。标题长度为零的提示工具永远不会显示。
tooltip.show()
隐藏
隐藏元素的工具提示。在工具提示实际隐藏之前(即在 hidden.bs.tooltip
事件发生)。这被认为是“手动”触发工具提示。
tooltip.hide()
切换
切换元素的工具提示。在工具提示实际显示或隐藏之前返回给调用者(即在 shown.bs.tooltip
或 hidden.bs.tooltip
事件发生)。这被认为是工具提示的“手动”触发。
tooltip.toggle()
处置
隐藏和销毁元素的工具提示(删除DOM元素上存储的数据)。使用委托(使用 selector 选项创建)的工具提示不能在后代触发器元素上单独销毁。
tooltip.dispose()
禁用
删除元素的提示工具显示的能力。提示工具只有在重新启用时才能显示。
tooltip.disable()
启用开关
切换显示或隐藏元素提示工具的能力。
tooltip.toggleEnabled()
更新
更新提示工具的位置。
tooltip.update()
获取实例
静态方法,它允许您获得与DOM元素关联的工具提示实例
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
获取创建实例
静态方法,它允许您获得与DOM元素关联的工具提示实例, 或者创建一个新的实例,以防它没有进行初始化
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
事件
事件类型 | 描述 |
---|---|
show.bs.tooltip |
当调用 show 实例方法时,此事件立即触发。 |
shown.bs.tooltip |
当提示工具对用户可见时触发此事件(将等待CSS转换完成)。 |
hide.bs.tooltip |
当 hide 实例方法被调用时,立即触发此事件。 |
hidden.bs.tooltip |
当提示工具对用户隐藏完毕(将等待CSS转换完成)时触发此事件。 |
inserted.bs.tooltip |
这个事件在 show.bs.tooltip 之后被触发。当提示工具模板已被添加到DOM时的提示工具事件。 |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()