bootstrap: 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

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 20 (14 by maintainers)

Commits related to this issue

Remove deprecated auto-initialization of popovers Initializing both tooltips and popovers on the same element is not supported by Bootstrap: https://github.com/twbs/bootstrap/issues/35710 — committed to TrestleAdmin/trestle by spohlenz 10 months ago

Most upvoted comments

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!

HybridSolutions on Mar 17, 2022

Same problem as @HybridSolutions.

pallu on Apr 5, 2022

Unfortunately no (afaik).

florianlacreuse on Aug 5, 2022

@GeoSot they want something like this $('#main-content').on('...', '[data-bs-toggle="tooltip"]', function (event) {...})

WinterSilence on Oct 11, 2022