Bootstrap5 弹出框 | 菜鸟教程
菜鸟教程 -- 学的不仅是技术，更是梦想！
首页
HTML
CSS
JavaScript
Vue
Bootstrap
NodeJS
Python3
Python2
Java
C++
C#
Go
SQL
Linux
jQuery
本地书签
首页
HTML
CSS
JS
本地书签
Search
Python3 教程
Python2 教程
Vue3 教程
vue2 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap2 教程
Bootstrap5 教程
Bootstrap5 教程
Bootstrap5 安装使用
Bootstrap5 容器
Bootstrap5 网格系统
Bootstrap5 文字排版
Bootstrap5 颜色
Bootstrap5 表格
Bootstrap5 图像形状
Bootstrap5 Jumbotron
Bootstrap5 信息提示框
Bootstrap5 按钮
Bootstrap5 按钮组
Bootstrap5 徽章
Bootstrap5 进度条
Bootstrap5 加载效果
Bootstrap5 分页
Bootstrap5 列表组
Bootstrap5 卡片
Bootstrap5 下拉菜单
Bootstrap5 折叠
Bootstrap5 导航
Bootstrap5 导航栏
Bootstrap5 轮播
Bootstrap5 模态框
Bootstrap5 提示框
Bootstrap5 弹出框
Bootstrap5 滚动监听
Bootstrap5 侧边栏导航
Bootstrap5 小工具
Bootstrap5 Flex
Bootstrap5 表单
Bootstrap5 表单
Bootstrap5 下拉菜单
Bootstrap5 复选框与单选框
Bootstrap5 选择区间
Bootstrap5 输入框组
Bootstrap5 表单浮动标签
Bootstrap5 表单验证
Bootstrap5 提示框
Bootstrap5 滚动监听
Bootstrap5 弹出框
弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。
如何创建弹出框
通过向元素添加 data-bs-toggle="popover"
来来创建弹出框。
title 属性的内容为弹出框的标题，data-bs-content 属性显示了弹出框的文本内容：
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="弹出框标题" data-bs-content="弹出框内容">多次点我</button>
注意: 弹出框要写在 JavaScript 的初始化代码里。
以下实例可以在文档的任何地方使用弹出框：
实例
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
尝试一下 »
指定弹出框的位置
默认情况下弹出框显示在元素右侧。
可以使用 data-bs-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:
实例
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="我是内容部分">点我</a>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="我是内容部分">点我</a>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="我是内容部分">点我</a>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="我是内容部分">点我</a>
尝试一下 »
关闭弹出框
默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-bs-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框：
实例
<a href="#" title="取消弹出框" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="点击文档的其他地方关闭我">点我</a>
尝试一下 »
提示:如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-bs-trigger 属性，并设置值为
"hover":
实例
<a href="#" title="标题" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="一些内容">鼠标移动到我这</a>
尝试一下 »
Bootstrap5 提示框
Bootstrap5 滚动监听
点我分享笔记
取消
分享笔记
昵称昵称 (必填)
邮箱邮箱 (必填)
引用地址引用地址
分类导航
HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质
Advertisement
反馈/建议
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· JS 混淆/加密
· PNG/JPEG 图片压缩
· HTML 拾色器
· JSON 格式化工具
· 随机数生成器
最新更新
·
Matplotlib imre...
·
Matplotlib imsa...
·
Matplotlib imsh...
·
Matplotlib 直方图
·
Python object()...
·
Python AI 绘画
·
神辅助 Cursor ...
站点信息
·
意见反馈
·
免责声明
·
关于我们
·
文章归档
关注微信
Copyright 2013-2023 菜鸟教程
runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
微信关注