首页 Bootstrap5组件手册

弹出框


1.需要javascript初始化
2.单击弹出提示框 或 指向弹出提示框

HTML格式：<a>
<a href="#" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="内容..." title="标题">链接</a>

HTML格式：<button>
<button class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="内容..." title="标题">按钮</button>

JavaScript代码：
<script type=text/javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)  
})
</script>
注：固定加到<body>底部

================================================================
自定义属性：
data-bs-toggle="tooltip"       创建提示框

data-bs-placement="top"        指定提示框显示位置
参数： 
top      上边
bottom   下边
left     左边
right    右边

data-bs-trigger="focus"        如何关闭提示框
参数：
focus    单击按钮以外的区域
hover    指向弹出，移开关闭
注：不加该属性，单击第二次关闭

data-bs-content=""             提示框内容

title=""                       提示框标题

示例


右边弹出提示框：
<button class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="再次单击按钮关闭..." title="标题">按钮</button>