here is html code:

<button type="button" class="btn btn-secondary mx-2" id="popOverId" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Your Cart(<span id="cart">0</span>)</button>

her is js code:

var myPopover = document.getElementById('popOverId');   
myPopover.show();

when i try above code, i got error:

(index):635 Uncaught TypeError: myPopover.show is not a function

Also when I use below code

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

it works fine but i want something that i initialize popover first but dont show, when button is clicked then only i trigger it to show popover

Also Can anyone tell how to pass data to "content" attribute of popover Bootstrap5