Bootstrap4组件:POP提示(Popover)


发布时间:2020-03-20 16:14    作者: Uncle Hui   已过去:2 周,6 日   阅读总量:51 已被赞:0


POP提示(Popover)  (与冒泡提示很相似)

示例

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

<button class="btn btn-primary" data-toggle="popover" title="标题!" data-content="内容内容内容。">button</button>

 

$(function () {

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

})

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

<button class="btn btn-primary" data-toggle="popover" title="标题!" data-content="内容内容内容。" data-placement="right">button</button>

自定义HTML添加 data-html="true" 

<button class="btn btn-primary" data-toggle="popover" title="<em>标题!</em>" data-content="<b>内容</b>内容内容。" data-html="true">button</button>

禁用元素

具有 disabled 属性的元素不是交互式的这意味着用户不能悬停或点击它们来触发弹出窗口(或工具提示)。 作为一种解决方法,您需要从包装器<div> or <span>中触发弹出窗口,并覆盖disabled元素上的指针事件。

对于禁用的弹出式触发器,您也可能更喜欢 data-trigger="hover" ,以便弹出窗口显示为用户的直接视觉反馈,因为他们可能不希望单击禁用的元素。

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

在下次点击时收回

使用focus触发器,达到提示必须在用户下一次点击时才能收回(移除)提示事件。

为正确处理(兼容)跨浏览器和跨平台行为,你必须使用则必须使用<a> 标签,而 不是标签,你还必须包括一个tabindex属性

<a tabindex="0" class="btn btn-primary" data-toggle="popover" title="标题!" data-content="内容内容内容。" data-trigger="focus">button</a>

 data" data-trigger="focus" 鼠标点击任意空白处,提示框消失ger="focus"

JavaScript 行为

选项

取消淡入淡出效果 延时处理

名称

Type类型

默认值

描述

animation

boolean

true

CSS淡入淡出应用于POP提示。

delay

number | object

0

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

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

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

 

trigger

string

'click'

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

例如:data-trigger="focus"

offset

number | string

0

POP提示框对于其目标的偏移

提示框与按钮位置偏移(上下,左右)

方法

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

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

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

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

事件

Event事件类型

描述

show.bs.popover

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

shown.bs.popover

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

hide.bs.popover

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

hidden.bs.popover

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

inserted.bs.popover

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

点赞

0




登陆后方可评论