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');