title: TypeError: Cannot read properties of null (reading 'template') on Bootstrap tooltip.dispose()
body: <p>I am trying to build a simple React web app that utilizes Bootstrap. Specifically, I was trying to use its tooltips component. I initialize every tooltip on a page using a custom hook with some tweaks to the code found in the <a href="https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere" rel="nofollow noreferrer">Bootstrap Docs</a> like so:</p>
  <pre class="lang-js prettyprint-override"><code>function useInitializeTooltips({ trigger = &quot;hover focus&quot; } = {}) {
    useEffect(() =&gt; {
      document.querySelectorAll(`[data-bs-toggle=&quot;tooltip&quot;]`)
      .forEach(
        (tooltipTriggerElement) =&gt; new Tooltip(tooltipTriggerElement, { trigger })
      );
  }
  
  export default useInitializeTooltips;
  </code></pre>
  <p>However, later on I realized using the code <em>as is</em> causes &quot;ghost&quot; tooltips to persist on re-renders  (e.g. when some state has changed) and even on page redirects (using <a href="https://v5.reactrouter.com/" rel="nofollow noreferrer">react-router v5</a>). These can only be removed on page reloads. That's why I perform some cleanup on unmount and now the code looks like so:</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
    const initializedTooltipList = [
      ...document.querySelectorAll(`[data-bs-toggle=&quot;tooltip&quot;]`)
    ].map(
      (tooltipTriggerElement) =&gt; new Tooltip(tooltipTriggerElement, { trigger })
    );
  
    // Dispose all initialized tooltips on component unmount
    return () =&gt; initializedTooltipList.forEach((tooltip) =&gt; tooltip.dispose());
  });
  </code></pre>
  <p>Now the bugged tooltips are gone but this creates a new problem. I get the following error when a tooltip is still <strong>showing</strong> and a re-render happens:</p>
  <pre><code>tooltip.js:371 Uncaught TypeError: Cannot read properties of null (reading 'template')
      at Tooltip.getTipElement (tooltip.js:371)
      at Tooltip._cleanTipClass (tooltip.js:705)
      at complete (tooltip.js:323)
      at execute (index.js:251)
      at HTMLDivElement.handler (index.js:273)
      at triggerTransitionEnd (index.js:100)
      at index.js:279
  </code></pre>
  <p><a href="https://i.stack.imgur.com/xIaln.png" rel="nofollow noreferrer">Actual error stacktrace screenshot</a></p>
  <p>This has been bugging me for a while now so I've looked around but found nothing on my particular circumstance. I did find <a href="https://stackoverflow.com/questions/57173408/uncaught-in-promise-typeerror-cannot-read-property-template-of-null-popover">this one</a> and also <a href="https://stackoverflow.com/a/67012775/17149207">this</a> that says to provide a 'manual' trigger option on init. However, from what I understand, in my app I am not manually triggering it myself, but manually <em>disposing</em>. Either way, I want to avoid manually triggering it if possible. I would also like to avoid using the <a href="https://react-bootstrap.netlify.app/components/overlays/#tooltips" rel="nofollow noreferrer">react-bootstrap</a> component library if I can.</p>
  <p>What's more, most articles I've found are using JQuery which I know next to nothing about. I've also tried digging into the bootstrap code itself but the only clue I found seems to be pointing to the fact that <code>this._config</code>, which I assume is the internal config it uses for init, somehow becomes <code>null</code> at some point in the component lifecycle. I wonder if I'm doing this the right way.</p>
  <p>Link for a codesandbox with details on how to reproduce the error <a href="https://codesandbox.io/s/bootstrap-tooltip-dispose-typeerror-phj98" rel="nofollow noreferrer">here</a>.</p>
  <p>I am still quite new to web development and have been developing for just a little over 3 months, so if there is some points that need clarification or my understanding was fundamentally wrong, please feel free to point it out!</p>