Using MutationObserver to remove orphan tooltips in SPA

I have Bootstrap tooltips in multiple places in my SPA, that will be shown/removed on mousein/mouseout. If the element on hover of which the tooltip is displayed gets removed from the DOM, that tooltip (if attached to body) is orphaned. Have a look at the demo please.

Containing the tooltip within the element is a solution, but I have a situation that doesn't allow me to do so.

So I thought of using MutationObserver API on the base component of my SPA, observe for subtree modifications and destroy all the tooltips on the current view ($(element).tooltip('destroy')), as a global fix. Is this okay? Would you recommend listening to subtree modifications globally? How costly is it?

const observer = new MutationObserver(() => $('[data-toggle=tooltip]').tooltip('destroy')),
  baseComponentElement = document.getElementById('base-component');

observer.observe(baseComponentElement, {
  childList: true, 
  subtree: true
});