学习使用Bootstrap弹出框Popover提示框样式

注意事项
弹出方向
失去焦点隐藏
禁用元素弹出提示框
data属性详解
js方法与事件
- 方法：
- 事件：

注意事项

popover提示框组件依赖 Popper.js 进行定位，在必须引入 popper.min.js 在bootstrap.js脚本之前，或者使用bootstrap.bundle.min.js / bootstrap.bundle.js（这两个脚本中已经包含了Popper.js可以直接运行弹出提示框）。

popover提示框组件依赖于 tooltips提示冒泡插件提供状态提示框。

如果你要自行编译JS，请 href=“https://getbootstrap.net/docs/components/docs/javascript.html#util”>包括 util.js脚本文件。

由于性能原因，popover提示框组件是可选的，所以你必须自己将它们初始化才能启动生效。

零长度的 title 和 content 不会显示为一个弹出提示框。
指定 container: 'body'定义，以避免在更复杂的组件（如输入框组、按钮组等）中产生呈现问题。在隐藏元素上触发弹出提示框是无效（不起作用）的。

.disabled 或 disabled 元素的弹出提示框触发点击按钮，必须在在外层父元素上。

如果从一个跨多行的链接上触发提示冒泡，提示冒泡将居中。在<a>上使用white-space: nowrap;可以避免这种情况。

必须先隐藏弹出提示框，然后才能从DOM中删除相应的元素（以完成弹出关闭完整行为）。

弹出方向

<div class="container"><div class="row mt-5"><div class="col"><!-- 4个弹出方向 --><button class="btn btn-secondary" data-toggle="popover" title="这个提示框没有标题，并且是在上面显示" data-placement="top">上面显示提示框</button><button class="btn btn-info" data-toggle="popover" title="这个提示框没有标题，并且是在右侧显示" data-placement="right">右侧显示提示框</button><button class="btn btn-primary" data-toggle="popover" title="这个提示框没有标题，并且是在下面显示" data-placement="bottom">下面显示提示框</button><button class="btn btn-warning" data-toggle="popover" title="这个提示框没有标题，并且是在左侧显示" data-placement="left">左侧显示提示框</button></div></div>
</div><script>//初始化提示框，必需要写这一步$(function(){$('[data-toggle="popover"]').popover();});
</script>

失去焦点隐藏

<div class="container"><div class="row mt-5"><div class="col"><button class="btn btn-dark" data-toggle="popover" title="这个提示框当焦点失去的时候就会隐藏" data-trigger="focus">失去焦点隐藏</button></div></div>
</div><script>//初始化提示框，必需要写这一步$(function(){$('[data-toggle="popover"]').popover();});
</script>

禁用元素弹出提示框

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

对于禁用的弹出式触发器，可以使用data-trigger="hover"来弹出窗口。

<div class="container"><div class="row mt-5"><div class="col">            <!-- 禁用元素弹出提示框 --><span class="d-inline-block" data-toggle="popover" data-trigger="hover" data-content="禁用的元素想要弹出提示框，需要在外面添加一层，把交互的功能都加到这个层上"><button class="btn btn-primary" style="pointer-events: none;" disabled>禁用的按钮弹出提示框</button></span></div></div>
</div><script>//初始化提示框，必需要写这一步$(function(){$('[data-toggle="popover"]').popover();});
</script>

data属性详解

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

<div class="container"><div id="box"></div><div class="row mt-5"><div class="col"><button class="btn btn-success" data-toggle="popover" title="这是<b>标题<b>" data-content="这是内容"data-animation="true"data-container='body'data-delay='{ "show": 1000, "hide": 2000 }'data-html='true'data-placement='top'data-template='<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'data-trigger='hover'data-offset='120'>data-属性</button></div></div>
</div><script>//初始化提示框，必需要写这一步$(function(){$('[data-toggle="popover"]').popover();});
</script>

js方法与事件

方法：

.popover(‘show’)：显示提示框
.popover(‘hide’)：隐藏提示框
.popover(‘toggle’)：切换提示框
.popover(‘disable’)：取消提示框功能
.popover(‘toggleEnabled’)：切换提示窗口的显示或隐藏功能
.popover(‘enable’)：添加提示框功能

事件：

show.bs.popover：le data-draft-node=“block” data-draft-type=“table” data-size=“normal” data-row-style=“normal”>
shown.bs.popover：当提示框显示时，会触发此事件（待CSS转换过渡完成）。
hide.bs.popover：当调用hide实例方法时，此事件立即触发。 1. hidden.bs.popover：当提示框隐藏后，会触发此事件（待CSS转换过渡完成）。
inserted.bs.popover：当提示框对用户来说最终完成隐藏时（需要等待CSS转换过渡完成），会触发该事件。当事件弹出模板被添加到DOM时，show.bs.popover事件被触发。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><title>Bootstrap的popover提示框样式</title>
</head><body><div class="container"><!-- 方法与事件 --><div class="col"><button class="btn btn-info" title="方法与事件" id="myPopover">方法与事件</button></div></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><script>//方法//$('#myPopover').popover('show');  //显示提示框/* setTimeout(function(){$('#myPopover').popover('hide');    //隐藏提示框},1000); *//* $('#myPopover').popover('hide');$('#myPopover').popover('toggle'); //切换提示框 *///$('#myPopover').popover('enable');  //添加提示框功能$('#myPopover').popover('disable'); //取消提示框功能$('#myPopover').popover('toggleEnabled') //切换（enable与disable的功能）//事件$('#myPopover').on('show.bs.popover', function () {console.log('提示框要显示了');});$('#myPopover').on('shown.bs.popover', function () {console.log('提示框已经完全显示了');});$('#myPopover').on('hide.bs.popover', function () {console.log('提示框要隐藏了');});$('#myPopover').on('hidden.bs.popover', function () {console.log('提示框已经完全隐藏了');});$('#myPopover').on('inserted.bs.popover', function () {console.log('提示框DOM已经插入到页面里了');});</script>
</body></html>

学习使用Bootstrap弹出框Popover提示框样式相关推荐

批量删除，未勾选数据，点击【批量删除】弹出确认删除提示框
批量删除,未勾选数据,点击[批量删除]弹出确认删除提示框给table组件,添加ref="selections" 在分页方法中,添加方法.设置为空
iOS中Mach异常和signal信号介绍，以及当APP崩溃时做线程保活弹出程序异常提示框
我们经常会遇到APP闪退和崩溃的问题,那么我们应该通过什么变量去监听APP的异常呢?如何在程序崩溃时,保证程序不闪退,并给用户弹出一个提示框呢? 这是本文将要讲述的内容. 先介绍2个概念,Mach异常 ...
mt6735 Audio framework]音量警告提示框选择OK，重启后再增大音量希望还会弹出音量警告提示框
[DESCRIPTION] 目前的做法是: 音量警告提示框选择OK,重启后就不会再弹出警告提示框, 除非恢复出厂设置如果希望重启后再增大音量希望还会弹出音量警告提示框请参考如下修改: [SOLUT ...
关于selenium关闭chrome密码登录时弹出的密码提示框
最近在使用chrome登录网站的时候总有密码保存提示框(并不是所有的都会有密码保存提示框) 其实只需要设置启动chrome的相关参数就可以避免这种问题,参数: prefs["credenti ...
IE浏览器下载excel文件时不弹出下载保存提示框的解决方法
在IE浏览器中下载文件的时候,下载保存的提示框不弹出了,特意咨询了一下解决的方法,特来和大家分享. 1.打开"我的电脑"后请点击工具列的:"工具 -- 文件夹选项&quo ...
html关闭页面弹出再见信息提示框,js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框//====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 functi ...
Django使用JavaScript弹出确认删除提示框
问题描述:删除数据时,为了避免误删,要在删除之前弹出提示框,用户点击确认删除之后才将相应数据删除. 工具与环境:JavaScript web开发 Django框架 python 1.JavaScrip ...
ios swift5 弹出原生的提示框（弹框） UIAlertController
文章目录 1.从中间弹出,限制textfield的内容长度 1.1 截图 1.2 代码 1.3 参考 2.从下面弹出 2.1 截图 2.2 代码 3.其他举例 3.1 下面只有一个确定按钮(带截图和代 ...
Django使用javascripts弹出确认删除提示框
1.JavaScript代码: <script type="text/javascript" language="JavaScript">funct ...

学习使用Bootstrap弹出框Popover提示框样式

学习使用Bootstrap弹出框Popover提示框样式

注意事项

弹出方向

失去焦点隐藏

禁用元素弹出提示框

data属性详解

js方法与事件

方法：

事件：

学习使用Bootstrap弹出框Popover提示框样式相关推荐

最新文章

热门文章