En Bootstrap 4.0, era posible cambiar el contenido de la ventana emergente (basado en el selector ) o reposicionarlo (usando la propiedad $tip ) dinámicamente
$("body").popover({ container: 'body', content: 'loading...', html: true, placement: 'right', trigger: "hover", selector: '.selector1', '.selector2', ... }).on('shown.bs.popover', function () { var this = $(event.target); ... if (this.hasClass('.selector1')) { var popover_method = ".../dynamic_popover_1" } ... $.get(popover_method, { ... }, function(response) { var popover_tip = $(this.data('bs.popover').tip); popover_tip.find('.popover-body').empty().append(response.popover_data_json); if ((popover_tip.offset().top - $(window).scrollTop()) + popover_tip.height() > window.innerHeight) { popover_tip.css({ top: - popover_tip.height() + 5 }); } ... Pero, ¿cómo hacerlo en Bootstrap 5.0 donde data('bs.popover') ya no existen?
En su lugar, debe usar Vanilla JS. Obtenga la instancia de popover en el evento 'mostrado' usando bootstrap.Popover.getInstance(myPopoverTrigger) y luego puede acceder a _config y dar tip según sea necesario. Por ejemplo...
var myPopoverTrigger = document.getElementById('myPopover') var myPopover = new bootstrap.Popover(myPopoverTrigger,{ content: 'Loading...', trigger: 'hover', }) myPopoverTrigger.addEventListener('shown.bs.popover', function (e) { // get the popover instance var popover = bootstrap.Popover.getInstance(myPopoverTrigger) // change the content popover._config.content = "Done!" popover.setContent(); // get the tip and chnage the position var tip = popover.tip tip.style.left = '300px'; })Demostración: https://codeply.com/p/nTTvvLo3ef