Bootstrap4组件:提示冒泡(Tooltip) 鼠标移上去,显示的内容


发布时间:2020-03-20 16:11    作者: Uncle Hui   已过去:4 月,3 周   阅读总量:335 已被赞:0


提示冒泡(Tooltip) 鼠标移上去,显示的内容,如:title=ddddd

示例

在网页上初始化所有的tooltip提示冒泡插件一个途径就是用data-toggle="tooltip" 来选择它们:

<button class="btn btn-primary" data-toggle="tooltip" title="标题内容123!">button</button>

 

$(function () {

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

})

方向:添加data-placement="top/right/bottom/left"设置工具提示方向:顶部、右侧、底部和左侧。

<button class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="标题内容123!">button</button>

自定义HTML添加 data-html="true" 可以再给提示内容指定html样式,但需要设定

data-html="true" 

<button class="btn btn-primary" data-toggle="tooltip" data-html="true" title="<em>标题</em>内容123!">button</button>

禁用元素可用于提交按钮石化后的提示功能

具有disabled disabled属性的元素不是交互式的, 这意味着用户不能集中注意力,、悬停或单击它们来触发工具提示(或弹窗).作为一种解决方案,你将希望从包装器<div>  <span>,触发工具提示,最好使用 tabindex="0", 并覆盖 pointer-events 禁用元素.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="标题内容123!">

<button class="btn btn-primary" style="pointer-events: none;"  disabled>button</button>

</span>

JavaScript 行为

选项

名称

Type类型

默认值

描述

animation

boolean

true

CSS淡入淡出应用于tooltip提示冒泡。

delay

number | object

0

显示和隐藏弹出提示框的延迟(ms)-不适用于手动触发类型。

如果向这个选项提供一个数字,隐藏/显示都会应用这个延迟。

对象结构是: delay: { "show": 500, "hide": 100 }

trigger

string

'hover focus'

如何触发提示冒泡 - click | hover | focus | manual.,你可以传递多个触发器,用空格隔开它们,但是`manual`不能与别的触发器结合使用。

offset

number | string

0

提示冒泡框对于其目标的偏移

 

方法

(1) .tooltip(options):将一个元素附加一个提示冒泡处理程序。

(2) .tooltip('show'):显示一个元素的提示冒泡, 在提示冒泡真正显示之前返回给调用者 (即shown.bs.tooltip 事件发生前)。这将被识别为一个“人为”的手动触发提示冒泡,零长度的提示框不会显示。

(3) .tooltip('hide'):隐藏元素的冒泡提示,在提示冒泡框实际被隐藏之前返回给调用者 (即 hidden.bs.tooltip 事件发生前)。这将被识别为一个“人为”的手动触发提示冒泡。

(4) .tooltip('toggle'):切换元素的工具提示冒泡,在提示冒泡真正显示或隐藏之前返回给调用者 (即 shown.bs.tooltip 或 hidden.bs.tooltip 事件发生前)。这将被识别为一个“人为”的手动触发提示冒泡。

事件

Event事件类型

描述

show.bs.tooltip

当调用show 实例方法时,会立即触发该事件。

shown.bs.tooltip

当提示冒泡对用户来说可见时(需要等待CSS过渡完成),会触发该事件。

hide.bs.tooltip

当调用hide实例方法时,会立即触发该事件。

hidden.bs.tooltip

当提示冒泡对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。

inserted.bs.tooltip

将提示冒泡框加到DOM后,会在show.bs.tooltip 事件后触发此事件。

 

点赞

0




登陆后方可评论