Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Tooltip doesn't hide when parent element removed #3084
I use Tooltip on buttons initiating AJAX loads, which remove the content including the tooltip parent element. In that case the tooltip won't hide.
Steps to reproduce:
I created JS fiddle demonstrating the issue: http://jsfiddle.net/fjHh5/
I had a similar issue with tooltips used in a modal window. You can set the trigger param to 'manual' and implement your own logic. In my case i iterated over all tooltip targets and called .tooltip('hide') on modal close.
Edit: You can also use a diffrent trigger and just call target.tooltip('hide') when target is removed.
I had to hack tooltip.show. when tooltip is shown it sets a timeout (250 ms is more than decent) to check if target element is still visible, and of course is still there. I was using $.is(":visible") to check element visibility but it uses elements size to detect visibility, which is not working on SVG elements, so I had to add another check for SVG elements using their getBBox method. It works like a charm.
referenced this issue
Mar 20, 2014
Just to build on @ElinaldoNascimento's solution listed above - if you hide the tooltip, it simply is hidden, not removed. This method worked better for me and doesn't leave hidden tooltips lying about in your source code:
Again, it's important to call this BEFORE your code that removes the tooltip's parent element. So for example:
Hope this helps anyone else that comes across this so when they eventually run into the conclusion that this will not be addressed in the Bootstrap code, they at least won't struggle as much for a solution.