Provide proper documentation for using Tooltip with selector

[axelfontaine]

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

There is currently no documentation on how to use Tooltip with 'selector' using plain JS.

Reduced test cases

This unfortunately doesn't work:

document.querySelector('body').tooltip({
  allowList: myAllowList,
  selector: '[data-bs-toggle="tooltip"]'
});

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

Windows

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

Firefox

What version of Bootstrap are you using?

5.3.3

[nwalters512]

Does the "enable tooltips" example in the docs not meet your needs?

https://getbootstrap.com/docs/5.3/components/tooltips/#enable-tooltips

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

If not, it'd be helpful to hear more about exactly what you're trying to achieve.

[axelfontaine]

@nwalters512 No, as this doesn't take care of elements added dynamically to the page later on.

[nwalters512]

Gotcha. IMO this is outside the realm of what Bootstrap can be expected to document, but I've used https://www.npmjs.com/package/selector-observer for this:

import { observe } from 'selector-observer';

observe('[data-bs-toggle="tooltip"]', {
  add(el) {
    new window.bootstrap.Tooltip(el);
  },
  remove(el) {
    window.bootstrap.Tooltip.getInstance(el)?.dispose();
  },
});

[axelfontaine]

Well that doesn't really document the selector setting, which from its description, should alleviate the need to pull in another dependency.

[nwalters512]

🙈 never mind; today I learned something new about the Bootstrap API! Yes, it'd be great for this to be formally documented.