Tooltip, if element is removed tooltip is left there

[manishtpatel]

If control on which tooltip is shown is removed then tooltip is left there and it's stuck there forever.

Steps:
Display a tooltip on a link
When hover over link tooltip is shown
Now clicking on that link removes link from the DOM
Tooltip is left there and never going away

[quasipickle]

The plugin could be modified to have the tooltip be a child element of whatever it's attached to, but then traversing said element might be off (ie: if you're expecting a set number of children).

Having the tooltip hide when the element is removed would be spotty, as browser support for DOM Mutation events isn't top notch, and IE is unique of course.

The simplest solution would be for you to just call $('#element").tooltip('hide'); before removing the element.

[Vincz]

A solution could be to implement the "destroy" event (with: http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js for example). Then, attach the destroy event to the tooltiped object and destroy the tooltip when element is destroy.

[fat]

You can display tooltips inside the element using the "inside" option in placement. However, that has a few problems of it's own.

I recommend just destroying it along with the element when you remove it.

[manishtpatel]

good enough, thanks

[timscott]

Here's how I'm doing it (CoffeeScript):

target.click -> 
     $(this).tooltip 'hide'
    #remove stuff including the target

'hide' seems to destroy, which makes sense in this context.

[dhruv-bhatia]

@timscott I just profiled the hide method using Chrome's heap inspector and it doesn't actually destroy the event (your code will likely have a memory leak). It would be great to have an actual destroy method that would perform all the necessary garbage collection.

[timscott]

_@dhruv-bhatia_ Okay, so although the tooltip element is removed from the DOM, which is what I verified, the event on the target element remains in memory? Yes it would be nice to have destroy.

[dhruv-bhatia]

@timscott Yes, that's what I observed - I managed to fix it by calling $(el).off() to clear all event handlers after I hide a tooltip. fat is looking into a deactivate method, see #3453.

FYI, you may want to inspect your own app's memory usage - http://gent.ilcore.com/2011/08/finding-memory-leaks.html

[samruben]

Please empty the tooltip element before rendering again. Hope it helps!

[mashedrooms]

Not a real solution but i made my own tooltip using like this.
adjust margin-top for distance from item.

>component.html

...

>component.scss
.myTooltip {
position: relative;
display: inline-block;
}

.myTooltip .myTooltipText {
opacity: 0;
visibility: hidden;
font-size: 12px;
width: 400px;
pointer-events: none;
border: 1px solid;
padding: 0 15px;
background: #b2d3e4;
color: #00639e;
text-align: justify;
border-radius: 6px;
margin-top: -70px;
position: fixed;
z-index: 999;
overflow: visible;
min-height: 54px;
vertical-align: middle;
display: inline-flex;
transition: opacity .1s ease-in-out;
-webkit-transition: opacity .1s ease-in-out;
}

.myTooltip .myTooltipText::after {
content: " ";
left: 10%;
bottom: -10px;
overflow: visible;
font-size: 12px;
width: 12px;
color: #00639e;
z-index: 99999;
position: absolute;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #b2d3e4 transparent transparent transparent;
}

.myTooltip:hover .myTooltipText {
visibility: visible;
opacity: 1;
}

[andyiwest]

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>

[Thoufak]

In my case the tooltip was attached to a button which would be removed immideatly after being clicked (but the tooltip would still remain visible). So, I check for obsolete tooltips after every click, and if they are found, remove them.

("body").on("click", e => {
    hideObsoleteTooltips()
})

function hideObsoleteTooltips() {
    // Find all existing tooltips
    const tooltips = $(".tooltip")
    for (const t of tooltips) {
        // Find the initiator of this tooltip
        const initiator = $(`[aria-describedby="${t.id}"]`)
        // If the initiator is no longer visible, remove the tooltip
        if (initiator.is(":hidden")) {
            t.remove()
        }
    }
}