Bootstrap 5 content function only gets called once

Question

I have the following code that creates and initializes a number of Bootstrap popovers.

I need the text to be updated each time it is shown, so I thought being able to set content to a function would be perfect. However, this function only gets called once per popover. So instead of updating each time it is displayed, it just keeps showing its initial value.

// Create popovers
$('img.example-conversion').each(function() {
    new bootstrap.Popover(this, {
        placement: 'right',
        trigger: 'click focus',
        html: true,
        title: 'Quantity Divisor',
        content: getPopoverContent,
    });
})

var count = 1;
function getPopoverContent() {
    return count++;
}

I need to update the text every time it is displayed. Does anyone know how to make that work?

Answer 1

Here's a proof of concept which creates three images that are popovers (which seems to be what your code is doing), enables them, and then sets up event listeners for them so they respond to the show.bs.popover event by changing their header and body:

// Enable popovers:
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

// Set up event listeners when each popover is shown:
$('.example-conversion').each(function(){
    $(this).on('show.bs.popover', function() {
        // Get the popover clicked on:
        let popover = bootstrap.Popover.getOrCreateInstance($(this)[0])
        popover.setContent({
            '.popover-header': 'another title',
            '.popover-body': 'another content'
        })
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<img width="100" height="100" border=1 class="example-conversion" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
<img width="100" height="100" border=1 class="example-conversion" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
<img width="100" height="100" border=1 class="example-conversion" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">