Tooltip stay on screen after I remove element

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

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>

Answer 2

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