Tooltips: Removing element from DOM should hide/remove its tooltip #3647

Closed
njam opened this Issue May 30, 2012 · 6 comments

Comments

Projects
None yet
5 participants

njam commented May 30, 2012

Hi,

When a tooltip for an element is visible, and that element gets removed I would expect the tooltip to be hidden or removed.
Reproduce:

  1. Go to "http://twitter.github.com/bootstrap/javascript.html#tooltips"
  2. Run JS in console: $('[rel="tooltip"]').on('click', function() { $(this).remove(); });
  3. Click on a tooltipped word to remove it
  4. -> The tooltip is still showing, as "mouseleave" is never triggered

A solution would be to bind a callback to the DOM-removal of the element. This could be done by using the "remove"-callback of "jQuery.event.special":
http://stackoverflow.com/a/10172676/216941

What do you think?

Owner

fat commented Jun 3, 2012

You can try that - but we don't want to do that in bootstraps core. My understand is the browser support is a bit spotty and it's easy enough to execute a close call before you blow your dom away. thanks for the input though!

fat closed this Jun 3, 2012

njam commented Jun 19, 2012

Thanks for your answer!

I still think this is something bootstrap-tooltip should do, because:

  • I don't want to care about when tooltips are shown/hidden, a .tooltip()-call should take care of that (modularity)
  • Bootstrap does handle all other scenarios which affect tooltip-visibility automatically (consistency)
  • If I replace/remove large portions of an html page I might neither know what's inside nor what dependency-DOM it has. I might not even know that it uses bootstrap. (again modularity)

For an implementation there seem to be two possible ways:

  • Method 1 which I suggested above installs an empty special event with only the "remove" method implemented. This will be called whenever jQuery tries to remove possible event bindings (i.e. on dom removal or replacing and on unbinding).
  • Method 2 is to overwrite jQuery's cleanData() method. This is what jQuery UI does.
    Both methods attach to jQuery to add a callback for dom removal. These only work if the removal is triggered by jQuery. So they work reliably in all browsers supported by jQuery.

Here's an example with both methods:
http://jsfiddle.net/qLrv4/

Any chance to get this into bootstrap? Otherwise this might be a reference for someone else.

andri commented Aug 24, 2012

This is something most of not all tooltip plugins fail at. If you are using something partial Ajax updated for your UI toolstips get stuck on the screen. At my work we are using emberjs and all the tooltip plugins we have tried have this same bug.

The jQuery mouseleave event is not triggered when the element being hovered is removed from the dom.

http://jsfiddle.net/PLFJc/

same here with backbone.js, it happens often when sometimes we have to render again any dom with the tooltip already hover by its children. Bootstrap tooltip should really care about it as something core, because when you work with a lot of views those things just get worst if you have to call delete everytime something is removed.

LeEnno commented Jan 6, 2013

+1

njam commented Feb 28, 2013

This seems to be fixed in the current version (2.3.0), where the tooltip is appended immediately after the target-element, instead of added to the body.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment