PoP提示

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), { container: 'body' })

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

四个方向

共有四个选项：顶部，右侧，底部和左侧对齐。 在RTL中使用Bootstrap时，会镜像方向。

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>

自定义弹出框

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

关闭提示

使用 focus 触发器可消除用户下次单击与切换元素不同的元素的弹出窗口。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})

禁用提示。

对于禁用的弹出式触发器，您可能还希望使用 data-bs-trigger="hover focus" ，这样弹出式窗口会立即显示给用户，因为他们可能不希望单击禁用的元素。

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

选项 

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

方法

展示

显示元素的弹出框。 在实际显示弹出窗口之前（即在 shown.bs.popover 事件发生之前）返回到调用者 。 这被认为是弹出窗口的“手动”触发。 标题和内容均为零长度的弹出窗口永远不会显示。

myPopover.show()

隐藏

隐藏元素的弹出框。在弹出窗口实际被隐藏之前（即在 hidden.bs.popover 事件发生之前）返回到调用者 。 这被认为是弹出窗口的“手动”触发。

myPopover.hide()

切换

切换元素的弹出框。在弹出窗口实际显示或隐藏之前（即在 shown.bs.popover 或 hidden.bs.popover 事件发生之前）返回到调用者 。 这被认为是弹出窗口的“手动”触发。

myPopover.toggle()

处置 

隐藏和销毁元素的弹出框（删除DOM元素上存储的数据）。 使用委派的弹出窗口（使用 selector 选项创建 ）不能在后代触发器元素上单独销毁。

myPopover.dispose()

启用

使元素的弹出框能够显示。默认情况下启用弹出窗口 。

myPopover.enable()

禁用 

删除显示元素弹出框的功能。 仅当重新启用弹出窗口时，才能显示该弹出窗口。

myPopover.disable()

切换器

切换显示或隐藏元素的弹出框的功能。

myPopover.toggleEnabled()

更新

更新元素弹出框的位置。

myPopover.update()

获取实例

允许您获取与DOM元素关联的popover实例的静态方法

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

事件

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})