html鼠标移动到图片上显示冒泡框,组件 - 提示冒泡(Tooltip) - 《Bootstrap v4.0 中文文档手册》 - 书栈网 · BookStack...

提示冒泡(Tooltip)

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

概览

使用提示冒泡持件时应了解以下：Tooltip提示冒泡组件依赖于 Popper.js ，你必须将popper.min.js 文件放在 bootstrap.js之前调用，或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js这两个已经包含了 Popper.js 的脚本。

如果自行编译JS，请 包含 util.js文件。

出于性能安排，Tooltip提示冒泡是一个可选插件，所以 你必须自己初始化它们。

标题(或内容)零长度情况下，Tooltip提示冒泡插件不会显示(生效)。

指定 container: 'body' 以避免复杂组年(如输入框组、按钮组等)中渲染呈出混乱(出问题)。

在隐藏元素上触发Tooltip提示冒泡插件不会起作用(无效行为)。

Tooltip提示冒泡插件的.disabled 或 disabled 元素必须放在外层(父层)元素上。

如果从一个跨多行的链接上触发Tooltip提示冒泡插件，提示冒泡将居中，在你的上使用white-space: nowrap; 可避免这种行为(即回归左右对齐)。

必须先隐藏Tooltip提示冒泡插件，然后才能从DOM中删除相应的元素。

此组件的动画效果取决于prefers-reduced-motion 媒体查询. 请参阅我们的 辅助功能文档的简化动作部分.

都明白了？很好。让我们来通过一些例子来看它们具体是如何运作的。

示例：在任何地方启用tooltip提示冒泡插件

在网页上初始化所有的tooltip提示冒泡插件一个途径就是用data-toggle 来选择它们：$(function(){

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

})

实际范例

请用鼠标点击下面一段文字上的链接，查看tooltip提示冒泡效果：

将鼠标悬停在下面的按钮上，可以看到四个工具提示方向:顶部、右侧、底部和左侧。

Tooltip on top

Tooltip on right

Tooltip on bottom

Tooltip on left

并且支持自定义HTML：

Tooltip with HTML

用法

tooltip提示冒泡插件根据需要生成内容和标记，默认情况下我们将它放在触发元素之后。

使用JavaScript触发提示冒泡：$('#example').tooltip(options)

溢出自动和滚动

当父容器溢出时，工具提示位置会尝试自动更改:自动或 溢出， 像我们的.table-responsive一样滚动,但仍保留原始位置的定位. 要解决此问题, 请将boundary选项设置为默认值, 'scrollParent',例如'window':$('#example').tooltip({boundary:'window'})

标记

工具提示框所需要的标记只是一个data 元素和你希望拥有一个tooltip提示冒泡HTML元素上的 title ，tooltip提示冒泡插件的标记很简单，尽管它需要一个位置(默认是 top 顶部指示)。

使tooltip提示冒泡使用于键盘和辅助技术使用者

推荐你只为传统的键盘和互动式(如链接或表单控制元件)的HTML元素添加tooltip提示冒泡框，虽然任意的HTML 元素 (如 )可以通过添加 tabindex="0" 属性来调整focus行为，但这会为键盘使用者的非互动式元素增加可能困惑(混乱/错误)的定位点。此外大多数辅助技术目前还没有加入这种情况下的提示冒泡效果支持。

Hover over me