Components: [Tooltip] Tooltip does not vanish after route navigation with reusable routes

[nharrer]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

A displayed tooltip should vanish, after navigating to a route with a different component.

What is the current behavior?

When a RouteReuseStrategy is implemented, then the tooltip doesn't vanish if the original route is detached while the tooltip was visible.

What are the steps to reproduce?

StackBlitz example: https://stackblitz.com/edit/angular-yvcjzp

A tooltip is displayed on button "Goto Page 2". Clicking on the button will navigate to page 2. This will causes the tooltip from page 1 to be stuck on the screen. It will only vanish once the user navigates back to page 1 again.

Disabling reusable routes by removing the custom RouteReuseStrategy will lead to the the expected behavior again:

providers: [
    // remove this, and the tooltip starts to work properly
    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
  ],

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

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

"dependencies": {
"@angular/animations": "6.0.0",
"@angular/cdk": "^6.0.0",
"@angular/common": "6.0.0",
"@angular/compiler": "6.0.0",
"@angular/core": "6.0.0",
"@angular/forms": "6.0.0",
"@angular/http": "6.0.0",
"@angular/material": "^6.0.0",
"@angular/platform-browser": "6.0.0",
"@angular/platform-browser-dynamic": "6.0.0",
"@angular/router": "6.0.0",
"core-js": "^2.4.1",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"zone.js": "^0.8.26"
},

Is there anything else we should know?

[MrD0llaro]

we have the same issue.

"dependencies": {
"@angular/animations": "^6.0.5",
"@angular/cdk": "^6.3.0",
"@angular/common": "^6.0.5",
"@angular/compiler": "^6.0.5",
"@angular/core": "^6.0.5",
"@angular/flex-layout": "6.0.0-beta.16",
"@angular/forms": "^6.0.5",
"@angular/http": "^6.0.5",
"@angular/material": "^6.3.0",
"@angular/platform-browser": "^6.0.5",
"@angular/platform-browser-dynamic": "^6.0.5",
"@angular/router": "^6.0.5",
"core-js": "^2.5.7",
"ng-http-loader": "^2.3.0",
"rxjs": "6.2.1",
"upgrade-angular": "^0.1.3",
"zone.js": "^0.8.19"
},

[Vizer]

Same issue, is it possible any workarounds for this issue?

[vinothsubramanian]

I also have same issue. Posted in StackOverflow and sample in stackblitz

[nharrer]

@Vizer Until this is fixed, I remove the tooltip manually with jquery from within the destination route component where the tooltip gets stuck:

public ngAfterViewInit() {
$('mat-tooltip-component div:contains("Tooltiptext")').remove();
}

I know. Very ugly.

[vinothsubramanian]

@nharrer Thanks for the work around.

I am not very sure it is right way do native. But it worked for me inside RouteReuseStrategy -> store method

while(document.getElementsByTagName('mat-tooltip-component').length > 0) { document.getElementsByTagName('mat-tooltip-component')[0].remove(); }

Workaround StackBlitz

[Vizer]

@nharrer, thanks for message. I have came up with other solution using tooltip's methods. In my case it works like this:

• related template

<a class="action" [routerLink]="[itemId, 'details']">
  <i class="material-icons" (click)="navigate($event)"
    [matTooltip]="'Details'">assignment</i>
</a>

• related component code:

...
@ViewChild(MatTooltip)
tooltip: MatTooltip;
...
navigate(event: MouseEvent) {
    event.stopPropagation();
    event.stopImmediatePropagation(); // optional in my case
    event.preventDefault(); // optional in my case

    this.tooltip.hide();

    setTimeout(() => {
      this._router.navigate([this.itemId, 'details'], {
        relativeTo: this._route
      });
    }, 50);
  } 

Hope this helps someone :)

[vsmonteiro]

Any update on this?

[backciro]

There's the problem also in nebular 5.0.

My current workaround:

Not a real solution but i made my own tooltip using like this.
adjust margin-top for distance from item.

>component.html

<div class="myTooltip">
    <span class="myTooltipText"> <!--Tooltip content --> </span>
    ...
</div>

>component.scss

.myTooltip {
  position: relative;
  display: inline-block;
}

.myTooltip .myTooltipText {
  opacity: 0;
  visibility: hidden;
  font-size: 12px;
  width: 400px;
  pointer-events: none;
  border: 1px solid;
  padding: 0 15px;
  background: #b2d3e4;
  color: #00639e;
  text-align: justify;
  border-radius: 6px;
  margin-top: -70px;
  position: fixed;
  z-index: 999;
  overflow: visible;
  min-height: 54px;
  vertical-align: middle;
  display: inline-flex;
  transition: opacity .1s ease-in-out;
  -webkit-transition: opacity .1s ease-in-out;
}

.myTooltip .myTooltipText::after {
  content: " ";
  left: 10%;
  bottom: -10px;
  overflow: visible;
  font-size: 12px;
  width: 12px;
  color: #00639e;
  z-index: 99999;
  position: absolute;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #b2d3e4 transparent transparent transparent;
}

.myTooltip:hover .myTooltipText {
  visibility: visible;
  opacity: 1;
}