Delayed tooltip still shown if clicked prior to matTooltipShowDelay

[ajshapiro]

Bug, feature request, or proposal:

Bug: Delayed tooltip is still shown if element is clicked prior to matTooltipShowDelay

What is the expected behavior?

A delayed tooltip should not be shown if element is clicked prior to the matTooltipShowDelay time being reached.

What is the current behavior?

A tooltip with matTooltipShowDelay set to a positive value will be displayed even if the element is clicked before the delay time is reached. A click after the delay time is reached and the tooltip is shown will correctly hide the tooltip.

For at least a button element, when the element does not have focus and mouseenter and click occur prior to matTooltipShowDelay, the tooltip is correctly not shown. However, if the element has focus prior to these events, the tooltip is incorrectly shown even after a click.

What are the steps to reproduce?

http://plnkr.co/edit/qfWnfq0pxHRS0hJKMSRZ

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

Tooltips that are still displayed after click can sometimes obscure underlying elements.

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

Angular 4.4.6
Material 2.0.0-beta.12-0ea4370
Windows 10
Chrome 61.0.3163.100
Typescript 2.5.3

Is there anything else we should know?

[crisbeto]

I spent some time looking into it and I think that doing this will break the ability to show a tooltip on click (fixed initially by #6590).

[ajshapiro]

I found that the animation start callback, which sets this._closeOnInteraction = false, was being called immediately after show() regardless of the delay, I believe because setting _visibility: TooltipVisibility = 'initial' triggers the "initial" animation and thus the animation start callback.

The following allowed a click to prevent display prior to the "visible" animation while still preventing closing during the animation:

 _animationStart() {
    if (this.isVisible())
      this._closeOnInteraction = false;
  }

Personally, I also want a click during the "visible" animation to also close the tooltip and don't need a click to show a tooltip (it's a tooltip not a popover), so I just removed the animation start callback altogether and that ensured the tooltip would always be closed on a click, which is my desired behavior.

[ajshapiro]

I do understand that this conflicts with showing a tooltip on click. These 2 behaviors are diametrically opposed (show on click vs hide on click). Perhaps an alternative is having a matTooltipShowOnClick input to allow manually choosing this behavior.

[vaceslav]

Any updates here?

[ranupoju0126]

In [matTooltip] check if the element is active which means if it is focused, then an empty string, else tooltip message

matTooltipShowDelay="1000"
[matTooltip]="document.getElementById('element Id ') == document.activeElement ? ' ' : 'Tooltip message"

make sure to add document = document in component typescript file.

Below is the example of Tooltip for Input element with 1000ms show delay

<input id="custom_id"
matTooltipClass="data-filter-tooltip"
matTooltipShowDelay="1000"
[matTooltip]="document.getElementById('custom_id') == document.activeElement ? '' : 'Tooltip message for Custom Id'"
color="primary"
matInput
type="text">