Menu icon Foundation
Tooltips don't auto-hide if parent element is removed from DOM

Is this a bug?

If the parent element (i.e. the span with has-tooltip) is removed from the DOM, and the tooltip is visible, the tooltip doesn't automatically hide. I can workaround this of course by looking for and removing elements with class=tooltip, but that's cumbersome; it seems that this should be wired in.

tooltipbug

Is this a bug?

If the parent element (i.e. the span with has-tooltip) is removed from the DOM, and the tooltip is visible, the tooltip doesn't automatically hide. I can workaround this of course by looking for and removing elements with class=tooltip, but that's cumbersome; it seems that this should be wired in.

Rafi Benkual over 5 years ago

Can you post an example so we can take a look?

Not Sneakyrobot over 5 years ago

Assume we have the tooltip set up like this:

<span id="will-hide" data-tooltip title="The tooltip message">
  <a href="#">mouse over me</a>
</span>

Wire up a button with a timer, so that 4 seconds after clicking the button, it will hide #will-hide. Click the button and mouse over the icon; keep the tip up until the timer runs and the element hides.

Now there's no way to get rid of the tooltip.

Sorry I can't post exact code.

James WIlkinson about 5 years ago

I have this problem as well. Our use case is with a single page app, tooltip is on a button, then when you click the button a Backbone.Marionette action happens to repaint the page with new content, but the tooltip remains on the page.

I think I will have to find all tooltips and hide every time a route action is made.

Wing-Hou Chan about 5 years ago

Howdy everyone!

Experimented in CodePen but couldn't reproduce your results: http://codepen.io/winghouchan/pen/lpjgb

Could you post your code or create a Pen demonstrating the problem?

James WIlkinson about 5 years ago

No can not post the code as its impossible to create an entire application, seriously stop asking for code we all work on proprietary integrated systems.

The problem is that you do not poll for the element to be on the dom, or listen for any dom reload bubbling to remove your element from the dom in ajax applications.

Make an ajax application that when you click on a button with a tool tip the content is replaced. Absolutely no refreshing of the page.

James WIlkinson about 5 years ago

This is about the tooltip being VISIBLE when an item happens.

His case click a button that has a timer, rollover a DIFFERENT item with a tooltip the tooltip will remain

Mine, button has tooltip, when click reloads dom, tools tip stays.

James WIlkinson about 5 years ago

This is as much code as I can give you

<td><a href="#" un-action-link="/articles/490/edit" un-action-type="edit"><i data-tooltip="" class="fa fa-pencil fa-fw" data-selector="tooltipulmthme7b9" title=""></i></a><a href="#" un-action-link="/articles/490  un-action-type=" delete"=""><i data-tooltip="" class="fa fa-trash-o fa-fw" title="Delete"></i></a></td>

James WIlkinson about 5 years ago

This is as roughly a code of what our does but I can't reproduce, I imagine there is a problem with the ajax loading that you're listening for something that doesn't get called with real AJAX. Where do I look for your code on what removes the tooltip?

http://codepen.io/anon/pen/vrlyw

lessless almost 4 years ago
Christoffer Karlsson over 3 years ago

Filed a new issue on GitHub for this: https://github.com/zurb/foundation/issues/6877

I found a temporary solution for now, though. I just add this code at the end of any click event that removes an element that has a tooltip:

$('.tooltip').each(function () {
    var tooltip = $(this);
    if (tooltip.attr('style')) {
        tooltip.removeAttr('style');
    }
});

Chris Oyler over 3 years ago

Thank you for your patience, those of you who have been waiting for a while for the fix to this issue. The cause of this is the tooltips are not children of the elements they relate too, they are appended to the body, and the JavaScript creates the markup. If you are removing an element with a tooltip, try adding this little bit of code to your remove function.
Javascript
$('#' + $elemWithTip.data('selector')).remove();

The JavaScript sets unique id's for the tooltips themselves, and you can access those id's with the [data-selector] attribute of the root element. No need to loop through all tooltips on the page.

Hope that helps!

Paulius Dragunas about 3 years ago

The above did not work on iOS while dynamically destroying a page using angular. What worked for me was: 

$('.tooltip').each(function () {
        var tooltip = $(this);
        if (tooltip.attr('style')) {
            tooltip.remove();
          }
      });