I need assistance with getting Bootstrap tooltips to work in my NextJS project. While I have successfully incorporated other Bootstrap components that require JS, implementing tooltips has proven challenging due to the use of document.querySelectorAll in the script provided by Bootstrap's documentation:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
I have explored various solutions such as using
typeof document !== "undefineduseEffect, but it appears that this code is still being executed during SSR. Is there a problem with my implementation of useEffect, or could there be another issue at play? Below is how I've structured my useEffect:
const Page = (props: any) => {
useEffect(() => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
}, []);
return (...
While I have successfully integrated the rest of Bootstrap into NextJS without any problems, I prefer not to switch to react-bootstrap due to past challenges with that library.
Thank you for your help!
Below are the modified versions utilizing `typeof document !== "undefined":
if (typeof document !== "undefined") {
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl)
})
}
UPDATE:
With input from the comments, I have resolved the initial issue within the useEffect. However, I am now encountering the same error with the code in bootstrap.js. The error message reads as follows:
error - ReferenceError: document is not defined at enableDismissTrigger (G:\Projects\nextjs\aaip-ts-bs-app\aaip-ts-bs\node_modules\bootstrap\dist\js\bootstrap.js:761:21) at G:\Projects\nextjs\aaip-ts-bs-app\aaip-ts-bs\node_modules\bootstrap\dist\js\bootstrap.js:856:3 at G:\Projects\nextjs\aaip-ts-bs-app\aaip-ts-bs\node_modules\bootstrap\dist\js\bootstrap.js:7:83 at Object. (G:\Projects\nextjs\aaip-ts-bs-app\aaip-ts-bs\node_modules\bootstrap\dist\js\bootstrap.js:10:3)
It seems like the error occurs when the server attempts to execute certain code within bootstrap.js.
I attempted the next/dynamic solution outlined in a medium post: Third solution at the bottom of the post. However, I am unsure about how to import Tooltip in that manner and utilize it within the useEffect hook. The article presents an example of rendering a client-side component, which does not align with my current setup.
If needed, here is the problematic method within Bootstrap's util/component-functions.js file:
/**
* --------------------------------------------------------------------------
* Bootstrap (v5.1.3): util/component-functions.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
const enableDismissTrigger = (component, method = 'hide') => {
const clickEvent = `click.dismiss${component.EVENT_KEY}`;
const name = component.NAME;
EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
if (['A', 'AREA'].includes(this.tagName)) {
event.preventDefault();
}
if (isDisabled(this)) {
return;
}
const target = getElementFromSelector(this) || this.closest(`.${name}`);
const instance = component.getOrCreateInstance(target); // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
instance[method]();
});
};
As evident from line 4, it references document.
A big thank you to @juliomalves in the comments for aiding me with the initial issue, and I appreciate any forthcoming assistance regarding the new challenge!