如何使用jquery在Bootstrap 5中创建和修改popover?

k2fxgqgv  于 2023-10-17  发布在  jQuery
关注(0)|答案(4)|浏览(147)

有人知道我如何通过JavaScript/jquery创建和添加数据到bootstrap 5 popover吗?
在Bootstrap 3中,我可以做到这一点:

$('#element').popover({ placement : 'left', trigger : 'focus', html: true });
let content_template = `<h1>Hello World!</h1>`;
$('#element').data('bs.popover').options.content = content_template;

但我不知道我怎么能用bootstrap 5做同样的事情。文件上没有提到这一点。有谁知道在BS 5中如何管理Popovers?

flvlnr44

flvlnr441#

您需要获取弹出框的示例,然后使用popover_instance._config.content ="some message"在弹出框中设置新内容。

  • 演示代码 *:
new bootstrap.Popover(document.querySelector('[data-bs-toggle]'), {
  placement: 'left',
  trigger: 'focus',
  html: true
})
//get instance
var popover_instance = bootstrap.Popover.getInstance(document.querySelector('[data-bs-toggle]'))
let content_template = `<h1>Hello World!</h1>`;
popover_instance._config.content = content_template;//set content
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title">Click to toggle popover</button>
eufgjt7s

eufgjt7s2#

使用vanilla JavaScript而不是jQuery。popover示例从示例化返回。然后,您可以使用它来修改内容...

const bsPopover = new bootstrap.Popover(document.querySelector('[data-bs-toggle]'), {
  placement: 'left',
  trigger: 'focus',
  html: true
})

bsPopover._config.content = `<h1>Hello World!</h1>`;
bsPopover.setContent();

Demo

prdp8dxp

prdp8dxp3#

如果您计划多次更新弹出框内容,则还需要在弹出框示例上调用setContent()。这样

popoverInstance._config.content = "Hello world";
popoverInstance.setContent();
42fyovps

42fyovps4#

您需要获取popover的示例并使用setContent方法(请参阅文档https://getbootstrap.com/docs/5.3/components/popovers/#methods)
setContent方法的唯一参数是具有以下格式的对象

const element = document.querySelector('[data-bs-toggle]');
const popover = bootstrap.Popover.getInstance(element);
popover.setContent({
    '.popover-header': 'My Header',
    '.popover-body': '<b>my content</b>'
});

相关问题