Currently in the process of transitioning an ES6 project from Bootstrap 4 to Bootstrap 5, encountering the following error:
Error: Uncaught TypeError: bootstrapElement.Tooltip is not a function
According to the Migration Notes, Bootstrap 5 no longer includes jQuery by default. However, Bootstrap's jQuery plugins will still be loaded if jQuery is detected in the window object.
Despite importing jQuery in my case, Bootstrap does not recognize it:
import $ from "jquery";
import {Tooltip} from "bootstrap";
import {getjQuery} from "bootstrap/js/src/util";
...
console.log(getjQuery()); // Returns null
bootstrapElement.Tooltip({ title: "Element Tooltip" }); // Throws the error mentioned above
Even attempting to manually load jQuery into the window object results in the same error:
if(!getjQuery()) {
window.jQuery = window.$ = $;
}
console.log(getjQuery()); // Now returns jQuery
bootstrapElement.Tooltip({ title: "Element Tooltip" }); // Still throws the error
This could be because I am loading jQuery into window after importing Tooltip, and the plugin is being loaded during import. This cannot occur since jQuery is not yet set to window.
A potential workaround involves directly using the plugin through:
let elementTooltip = new Tooltip(bootstrapElement, { title: "Element Tooltip" });
elementTooltip.show();
as opposed to
bootstrapElement.Tooltip({ title: "Element Tooltip" });
bootstrapElement.Tooltip("Show");
However, this approach presents challenges when managing tooltips removal as accessing elementTooltip becomes problematic. Implementing a solution would require architectural changes within the project (especially considering other plugins used), which I aim to avoid.
Is there a method to import jQuery that allows Bootstrap 5 to recognize it and load its corresponding jQuery plugin?