Does someone know how I can create and add data to bootstrap 5 popover via javascript/jquery?

With bootstrap 3 I was able to do this:

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

But I can't figure out how I can do the same with bootstrap 5. The documentation doesn't mention anything about this. Does anyone know how popovers are managed in BS5?

Does someone know how I can create and add data to bootstrap 5 popover via javascript/jquery?

With bootstrap 3 I was able to do this:

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

But I can't figure out how I can do the same with bootstrap 5. The documentation doesn't mention anything about this. Does anyone know how popovers are managed in BS5?

• javascript
• jquery
• popover
• bootstrap-5

• You should be seeking to eliminate jQuery from a Bootstrap 5 project (unless you have to support ically old browsers). It's had its day and is widely considered obsolete in modern apps. – isherwood Commented Jun 30, 2021 at 13:04
• React is fine if you're developing using Node.js, but not everyone does. – TC_Guy Commented Feb 15, 2023 at 15:16

4 Answers 4

You need to get instance of popover and then use popover_instance._config.content ="some message" to set new content inside your popover .

Demo Code :

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./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/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>

Use vanilla JavaScript instead of jQuery. The popover instance is returned from instantiation. You can then use this to modify the content...

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

If you plan on updating popover content multiple times you also need to call setContent() on popover instance. Like this

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

You need to get instance of popover and use setContent method (see the docs https://getbootstrap./docs/5.3/ponents/popovers/#methods)

The only argument of the setContent method is an object with following format

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>'
});