Popover + Tooltip : js error multiple instances with selector option.

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When using selector option for both popovers and tooltips this way:

new bootstrap.Tooltip(document.body, {
  selector: '[data-bs-toggle="tooltip"]'
});

new bootstrap.Popover(document.body, {
  selector: '[data-bs-toggle="popover"]'
});

We get the following js error (check browser console to see the error):

Bootstrap doesn’t allow more than one instance per element. Bound instance: bs.tooltip.

https://github.com/twbs/bootstrap/blob/520cc8de92ca48d7ac60102d992d7afe9788b239/js/src/dom/data.js#L16-L28

Because we use document.body in both cases.

Reduced test cases

https://codepen.io/florianlacreuse/pen/jOaNzVm

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.1.3

[HybridSolutions]

Sorry to bring this up again, but using Blazor and the selector option is really required for both the components to work since most of the times elements may not be present on the page. So, if I can’t use this

new bootstrap.Tooltip(document.body, {
            selector: '[data-bs-toggle="tooltip"]'
        });

        new bootstrap.Popover(document.body, {
            selector: '[data-bs-toggle="popover"]'
        });

what is the official alternative since this is the approach mentioned in documentation?

Thank you in advance!

[pallu]

Same problem as @HybridSolutions.