Tooltip of detached view won't go away

[HarelM]

Bug

When detaching a view using keyboard while hovering to see a tooltip, the tooltip stays while the parent is removed. (I think there was a bug in the past on this but couldn't find it).

What is the expected behavior?

Tooltip won't stay when its parent was removed.

What is the current behavior?

Tooltip stays.

What are the steps to reproduce?

The below plunker should show the issue if you follow these steps:

1. Click the click me button to create a dynamically attached component.
2. Hover the new component to get the tooltip.
3. Click the ESC button to remove the newly added component.
   https://plnkr.co/edit/TTPxE2b7kDV3dNgNsb8V?p=preview

Tooltip stays. I couldn't make it fully work on plunker as I see errors in the console log and I'm not sure what's wrong with my code, but In my site I have the exact same issue without console log errors.

What is the use-case or motivation for changing an existing behavior?

There is no way to make the tooltip go away, a timeout for tooltips would also work in this case but I don't see it in the documentation.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Plunker is spawned from the documentation, so which ever version is used there, all browsers.

Is there anything else we should know?

a tooltip close timeout would also be a good addition to the tooltip API.

[crisbeto]

A few notes:

1. Your example throws an error because both the initial host and the host that gets added afterwards listen to the global keyup. Since the initial one doesn't have a componentRef, it will throw.
2. You're using detachView which removes the view from the DOM, but it is still live in memory. Angular doesn't have a way to react to a view being detached, hence why the tooltip isn't removed.
3. If you want to get rid of the view completely, including clearing out the tooltip, you can call componentRef.destroy which will also trigger the ngOnDestroy from the MdTooltip.

Here's a forked working Plunkr. Closing since everything works as expected.

[HarelM]

Thank you very much for the detailed answer!
However, the example provided is not exactly what I need, I just wanted to present the problem.
In my case, I create a component and store some state in it.
If I'll destroy the component I'll loose the state.
Is there a way to signal the tooltip to hide when I detach the view? or have a timeout so it will automatically hide after a period of time?

[crisbeto]

You can get a reference to the tooltip using a @ViewChild query and hide it manually.

[HarelM]

Will it be possible to add the above scenario (using childview) to the tooltip example? I'm sure I'm not the only one who wishes to close a tooltip manually from the code...
https://material.angular.io/components/tooltip/overview
Also I'm guessing that in many cases there is more than one tooltip on the screen so closing all of them would be a good example, IMHO.
Thanks for taking the time and answer my questions.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}