Tooltip stay on screen after I remove element - tooltip

Question

When I am dynamically removing an element that has a bootstrap tooltip and the cursor is still hover, The tooltip stay on screen even if we move the cursor.
I tried to hide the tooltips before I remove the element, but it seems that it doesn't work.
function hidelm(){
$("#nav").html("");
}
$('[data-toggle="tooltip"]').tooltip();
setTimeout(function(){hidelm();},5000);
<div id="nav">
<div data-toggle="tooltip">some content</div>
</div>

Answer 1

Default behaviour is on focus and hover. Disable like this:
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
});

Answer 2

In my case I want to keep default behavior. So I write a function to remove dead tooltips.
$(() => {
// Save interval id to clean it later
let interval;
// Init bs-tooltip
$("body").tooltip({
selector: '[data-toggle=tooltip]',
}).on('shown.bs.tooltip', () => {
// Remove dead tooltips
// Interval callback is set, do not need more
if (interval) {
return;
}
// Set interval callback
interval = setInterval(() => {
// Search for all tooltips
const $tooltips = $('body > .tooltip');
if ($tooltips.length === 0) {
// No tooltips, interval can be cleared
clearInterval(interval);
interval = null;
return;
}
// Loop through tooltips
$tooltips.each((i,tooltip) => {
// Do tooltip has its initiator?
if ($(`[aria-describedby="${tooltip.id}"]`).length === 0) {
// No. It is dead tooltip, remove it.
tooltip.remove();
}
});
}, 1500); // Clean tooltips every 1500ms
});
});
In your html:
<span class="icon ico-check" aria-hidden="true" data-toggle="tooltip" title="Correct"></span>