New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip doesn't hide when parent element removed #3084

Closed
OndraM opened this Issue Apr 16, 2012 · 13 comments

Comments

Projects
None yet
@OndraM

OndraM commented Apr 16, 2012

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:

  1. Mouseover the button with tooltip
  2. Tooltip is shown
  3. Click the button (while the tooltip is shown)
  4. The element where the tooltip parent element was placed is now removed/replaced with AJAX
  5. New content is displayed, but the tooltip is still present, and I am unable to remove it (the mouseleave event won't fire, because the tooltip parent element is no longer there).

I created JS fiddle demonstrating the issue: http://jsfiddle.net/fjHh5/

@FloNeu

This comment has been minimized.

Show comment
Hide comment
@FloNeu

FloNeu Apr 16, 2012

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.

FloNeu commented Apr 16, 2012

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.

@OndraM

This comment has been minimized.

Show comment
Hide comment
@OndraM

OndraM Apr 16, 2012

I know that and I used it as workaround. Question is, whether this shouldn't be somehow implemented out-of-box...

OndraM commented Apr 16, 2012

I know that and I used it as workaround. Question is, whether this shouldn't be somehow implemented out-of-box...

@fat

This comment has been minimized.

Show comment
Hide comment
@fat

fat Apr 18, 2012

Member

You'll have to manually remove the tooltip when removing an element.

Member

fat commented Apr 18, 2012

You'll have to manually remove the tooltip when removing an element.

@fat fat closed this Apr 18, 2012

@alien3d

This comment has been minimized.

Show comment
Hide comment
@alien3d

alien3d Jun 10, 2012

http://jsfiddle.net/fjHh5/1/
I have the same bug.. But if i hide before first time .it disappear. if the same thing doing again and again. it still appear.
i also put on document on ready hide.. still not working.any idea?

alien3d commented Jun 10, 2012

http://jsfiddle.net/fjHh5/1/
I have the same bug.. But if i hide before first time .it disappear. if the same thing doing again and again. it still appear.
i also put on document on ready hide.. still not working.any idea?

@alien3d

This comment has been minimized.

Show comment
Hide comment
@alien3d

alien3d Jun 10, 2012

solve the issue by put sleep .. to fast

alien3d commented Jun 10, 2012

solve the issue by put sleep .. to fast

@sivann

This comment has been minimized.

Show comment
Hide comment
@sivann

sivann Jun 27, 2012

You cannot always remove manually. If you use it with some datagrid like slickgrid the datagrid formatters change the html dynamically without providing any events or callbacks to use.

sivann commented Jun 27, 2012

You cannot always remove manually. If you use it with some datagrid like slickgrid the datagrid formatters change the html dynamically without providing any events or callbacks to use.

@VonD

This comment has been minimized.

Show comment
Hide comment
@VonD

VonD Aug 9, 2012

same issue here with slickgrid

VonD commented Aug 9, 2012

same issue here with slickgrid

@IslamAmeen

This comment has been minimized.

Show comment
Hide comment
@IslamAmeen

IslamAmeen Oct 20, 2012

How did you managed to solve it alien3d?

How did you managed to solve it alien3d?

@elinaldosoft

This comment has been minimized.

Show comment
Hide comment
@elinaldosoft

elinaldosoft Apr 11, 2013

Before removing the element use $(".tooltip").hide();

Before removing the element use $(".tooltip").hide();

@edokan

This comment has been minimized.

Show comment
Hide comment
@edokan

edokan Apr 12, 2013

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.

edokan commented Apr 12, 2013

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.

@sirNemanjapro

This comment has been minimized.

Show comment
Hide comment
@sirNemanjapro

sirNemanjapro Mar 20, 2014

The problem with the tooltip is active again in 3.1.1.

The problem with the tooltip is active again in 3.1.1.

@sirNemanjapro

This comment has been minimized.

Show comment
Hide comment
@sirNemanjapro

sirNemanjapro Mar 20, 2014

@OndraM @FloNeu @fat @alien3d @sivann @VonD @IslamAmeen @ElinaldoNascimento @cvrebert

As mentioned before, the problem with the tooltip is active again in 3.1.1.

DEMO >> http://jsfiddle.net/m9AX5/5/

@OndraM @FloNeu @fat @alien3d @sivann @VonD @IslamAmeen @ElinaldoNascimento @cvrebert

As mentioned before, the problem with the tooltip is active again in 3.1.1.

DEMO >> http://jsfiddle.net/m9AX5/5/

@Joyrex

This comment has been minimized.

Show comment
Hide comment
@Joyrex

Joyrex Jul 20, 2015

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:

$('.tooltip').tooltip('destroy');

Again, it's important to call this BEFORE your code that removes the tooltip's parent element. So for example:

$('#container').fadeOut(600,function(){$('.tooltip').tooltip('destroy');$('#container').remove();});

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.

Joyrex commented Jul 20, 2015

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:

$('.tooltip').tooltip('destroy');

Again, it's important to call this BEFORE your code that removes the tooltip's parent element. So for example:

$('#container').fadeOut(600,function(){$('.tooltip').tooltip('destroy');$('#container').remove();});

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.

@twbs twbs locked and limited conversation to collaborators Jul 24, 2015

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