How to remove/hide bootstrap tooltip when element is removed from the DOM

Question

I'm currently working on a project in ReactJS. Some of my components are not rendered all the time but change dynamically based on certain conditions. When these components have a tool tip attached to them, I'm noticing that if the tooltip was active when the element was hidden, the tooltip does not go away. I'm looking for a way to remove or at least hide this tooltip when the element is not being rendered.

This is how I'm activating the tooltips using jQuery:

$(document).ready(function() {
      $("body").tooltip({ selector: '[data-toggle=tooltip]', placement: 'bottom' })
    })

This is how I'm using it within the html (or jsx):

<a className="icon-btn" onClick={ () => {
//on Click I remove this parent element and show something else
}}>
<i className="fa fa-lg fa-pencil-square" title="Edit" data-toggle="tooltip"></i>
</a>

Note I have not been able to select all elements by tooltip using:

$('[data-toggle=tooltip]').tooltip()

Apparently that is because I am adding elements dynamically? At least that is what my research so far shows

Answer 1

$('.tooltip').tooltip('hide');

Answer 2

I was having a similar problem and I know that the question is already a bit old but I post my solution, maybe it helps someone in the future... (It's an Angular-TypeScript-JQuery mixture but the principle is the same.)

In the component:

/* Toggles the Bootstrap 4 tooltip of an HTML element. */
private tooltip(elem: HTMLElement, action: string): void {
    (<any>$(elem)).tooltip("dispose");
    (<any>$(elem)).tooltip({ container: "body" });
    (<any>$(elem)).tooltip(action);
    (<any>$(elem)).tooltip("update");
}

In the view:

<someElement data-toggle="tooltip" title="..."
  (mouseenter)="tooltip($event.target,'show')"
  (mouseleave)="tooltip($event.target,'hide')">
</someElement>

So basically instead of using a global $('[data-toggle=tooltip]').tooltip() for activating all tooltips at once – which wouldn't work anyway if you have tooltips not being part of the DOM at the time this code is called because the page is generated dynamically by some JS framework for example – you only attach the tooltips to the elements when the cursor enters them, and destroy them immediately when it leaves.

(The { container: "body" } and "update" options are only to prevent positioning issues like this for more complex layouts.)

Answer 3

Though this is an older one, this may help someone in future...I encountered this issue in a Vue app and setting the tooltip to hover only did not solve the issue for me (I also wanted it to appear on focus for accessibility reasons). Ultimately, setting data-container to a parent element worked for me which then creates the tooltip inside this element (in my case, the entire parent element was being removed so the tooltip is then removed with it). Note, you may need to set data-boundary to "window" as well if you run into tooltip placement issues - this will ensure it will overflow the container. For example:

<button data-toggle="tooltip" data-placement="right" data-container=".container" data-boundary="window"></button>

Answer 4

None of the accepted answers seemed to resolve my issue, and would just leave the tooltip floating mid-page, and then upon scrolling, it would move to the top left of the page due to the absolute positioning. (I'm using Vue, and the element already had an @click event on it, so I added a parent wrapping div and applied an inline event there)

<div onclick="removeTT()">
     <div data-toggle="tooltip" data-placement="top" title="Tooltip on top"></div>
</div>

<script>
function removeTT() {
    $('.tooltip').tooltip('hide');
}
</script>