【官方原版】Bootstrap Tooltips

概述

使用CSS和JavaScript为本地存储的标题数据添加自定义Bootstrap工具提示，可基于CSS3实现动画效果。

使用必知：

工具提示依靠第三方库Popper.js进行定位。您必须在bootstrap.js之前包含popper.min.js或使用包含Popper.js的bootstrap.bundle.min.js 或bootstrap.bundle.js以便工具提示工作！
如果您从源代码构建我们的JavaScript，则需要util.js.
出于性能原因，工具提示是选择性的，因此您必须自己初始化它们。
内容长度为0时永远不会显示。
指定容器：'body'以避免在更复杂的组件（如输入组，按钮组等）中呈现问题。
隐藏元素上的触发事件工具提示无效。
必须在包裹（原为：wrapper）元素上触发.disabled或disabled元素的工具提示。
从跨越多行的超链接触发时，工具提示将居中。使用white-space: nowrap; 在你的<a>上以避免这种行为。
必须先隐藏工具提示，然后才能从DOM中删除相应的元素。

示例：任意位置

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

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

示例：

鼠标悬停方式：

以下这段话本人无法翻译，请自行体会：

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.

将鼠标悬停在下方按钮上可查看四个工具提示方向：顶部，右侧，底部和左侧。

<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内容（主要修改title的属性值即可）：

<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>

用例：

工具提示插件根据需要生成内容和标记，默认情况下在触发元素后面放置工具提示。

通过JavaScript触发工具提示：

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

内容超出后自动滚动：

Tooltip position attempts to automatically change when a parent container has overflow: auto or overflow: scroll like our .table-responsive, but still keeps the original placement’s positioning. To resolve, set the boundary option to anything other than default value, 'scrollParent', such as 'window':

当超出如容器时，工具提示会尝试自动更改位置：auto或overflow：像我们的.table-responsive一样滚动，但仍保留原始位置的定位。要解决此问题，请将边界选项设置为默认值“scrollParent”以外的任何值，例如“window”：

$('#example').tooltip({ boundary: 'window' })

标记：

他需要工具提示的标记只是您希望获得工具提示的HTML元素的数据属性和标题。生成的工具提示标记相当简单，但它确实需要一个位置（默认值为顶部）。

使工具提示适用于键盘和辅助技术人员

您应该只向HTML元素添加工具提示，这些元素通常是键盘可聚焦和交互式的（例如链接或表单控件）。虽然可以通过添加tabindex =“0”属性使任意HTML元素（例如<span> s）变得可聚焦，但这将为键盘用户的非交互元素添加可能令人烦恼且令人困惑的制表位。此外，目前大多数辅助技术都没有公布这种情况下的工具提示。

此外，不要仅仅依靠悬停作为工具提示的触发器，因为这将使您的工具提示无法触发键盘用户。

<!-- 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>

禁用的元素：

具有disabled属性的元素是非交互式的，这意味着用户无法对其进行聚焦，悬停或单击以触发工具提示（或弹出框）。作为一种解决方法，您需要从包装容器<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>

【选项】

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

名称	类型	默认值	说明
animation	boolean	true	Apply a CSS fade transition to the tooltip
container	string \| element \| false	false	Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.
delay	number \| object	0	Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: `delay: { "show": 500, "hide": 100 }`
html	boolean	false	Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, jQuery's `text` method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement	string \| function	'top'	How to position the tooltip - auto \| top \| bottom \| left \| right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance.
selector	string \| false	false	If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template	string	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip`class and `role="tooltip"`.
title	string \| element \| function	''	Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the tooltip is attached to.
trigger	string	'hover focus'	How tooltip is triggered - click \| hover \| focus \| manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')`and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.
offset	number \| string	0	Offset of the tooltip relative to its target. For more information refer to Popper.js's offset docs.
fallbackPlacement	string \| array	'flip'	Allow to specify which position Popper will use on fallback. For more information refer to Popper.js's behavior docs
boundary	string \| element	'scrollParent'	Overflow constraint boundary of the tooltip. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

各个工具提示的数据属性

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

方法

异步方法和转换

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

See our JavaScript documentation for more information.

$().tooltip(options)

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

.tooltip('show')

Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('dispose')

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

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

.tooltip('enable')

为元素的工具提示提供显示的能力。默认情况下启用工具提示。

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

.tooltip('disable')

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

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

.tooltip('toggleEnabled')

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

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

.tooltip('update')

更新元素的提示位置

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

事件

原文

事件类型	说明
show.bs.tooltip	This event fires immediately when the `show` instance method is called.
shown.bs.tooltip	This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.tooltip	This event is fired immediately when the `hide` instance method has been called.
hidden.bs.tooltip	This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.tooltip	This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM.

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

【官方原版】Bootstrap Tooltips相关推荐

中关村win11 32位官方原版iso文件v2021.08
中关村win11 32位官方原版iso文件v2021.08是一款非常不错的电脑操作系统,该系统在装机方面进行了专门的优化和升级,可以以短短数分钟的时候进行安装,自带安全功能,非常的好用,而且不用激活, ...
番茄花园win11 32位官方原版镜像文件v2021.07
番茄花园win11 32位官方原版镜像文件v2021.07是一款微软最新发布的官方版系统,此次更新恢复了右键刷新,用户可以体验到之前的右键刷新的便捷,而且系统自带多种类型的装机工具,可以让你的系统更加 ...
windows7官方原版_从零开始学装系统——微软官方原版windows7详细安装流程
大家好,欢迎回到万魔寺,上期我们学习了微软官方原版镜像制作系统安装U盘的方法.用了windows7做了例子,本期我们继续分享微软官方原版的windows7安装全流程. 我们照旧将系统安装U盘插入电脑, ...
官方原版美化修改版完美适配双端海洋cms模板
简介: 官方原版美化修改版海洋cms模板,官方V10.7版本自带原模板,已测试,完美无错,自适应手机端. 美化修改了:1.导航为一行,2.首页添加幻灯片效果,3.播放页修改为完整显示,不会因为页面的滑 ...
Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)
引用bootstrap之后报这个错误,错误出在bootstrap.js文件中,原语句是: if(void 0===window.Tether)throw new Error("Bootstr ...
VMware ESXi 7.0 正式版vSphere7.0官方原版ISO和离线定制包附加vcsa套件
VMware ESXi 7.0 正式版vSphere7.0官方原版ISO和离线定制包附加vcsa套件 vSphere 7简介:混合云的功能和技术(ESXI7.0) 20200403再更新: [http ...
『强烈推荐2个网站』这才是Win10官方原版正确下载姿势
都9102年了,安装微软系统你还在用PE启动工具或者ghost系统吗?这些方法本身没有什么毛病,就是担心别有用心的人拿去修改,所以就有了并不纯净的「纯净版」系统.今天小编推荐2个下载Win10纯净版系 ...
微软官方原版WindowsXP Pro With Sp2简体中文VOL版
微软官方原版Windows.XP.Pro.With.Sp2简体中文VOL版 MD5:f455f9a787b620aca7ac89ab47574919 CD-KEY:HCQ9D-TVCWX-X9QRG- ...
office2010安装包下载，专业版完整版官方原版
网络上office的版本各异,各种修改版精简版也是比比皆是,,让用户无从选择.更有甚者夹带私货(流氓程序和木马病毒捆绑),破坏系统,导致各种异常. 所以最好的办法是通过官方渠道下载完整版. 分享的of ...
【经典收藏】深度技术ghost官方原版XP系统sp3下载地址 ...
[经典收藏]深度技术ghost官方原版XP系统sp3下载地址深度技术GHOST_XP_SP3快速装机专业V18版 ftp://down.xp220.com/DEEPIN-LITEXP-V18.0.i ...

【官方原版】Bootstrap Tooltips

概述

标记：

事件

【官方原版】Bootstrap Tooltips相关推荐

最新文章

热门文章