jQuery namespace collisions with Bootstrap 5

Viewed 258

I have taken the plunge learning jQuery and Bootstrap. I however, learnt that Bootstrap 4 is happy with jQuery being used, but the latest version (v5.1.3) doesn't always. That is because, as InfoQ points out that the Bootstrap team noted that all supported browsers provide jQuery replacement features in plain JavaScript and therefore they saved 85KB in minified JavaScript.

Bootstrap.com points out that

Bootstrap 5 is designed to be used without jQuery, but it’s still possible to use our components with jQuery. If Bootstrap detects jQuery in the window object it’ll add all of our components in jQuery’s plugin system; this means you’ll be able to do $('[data-bs-toggle="tooltip"]').tooltip() to enable tooltips. The same goes for our other components.

However, confusingly it points out that (emphasis mine)

Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a <script> tag with module type because they depend on Popper.

Bootstrap.com also points out that

No conflict (only if you use jQuery)
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.

Do this mean that jQuery has namespace collisions which need to be borne in mind? What reliable resource is available for highlighting these collisions?

0 Answers
Related