tooltip: buggy when deployed as an Angular Element

What is the expected behavior?

That tooltips are not buggy.

What is the current behavior?

Tooltips are buggy.

What are the steps to reproduce?

app.module.ts import { MatTooltipModule } from '@angular/material/tooltip';

somecomponent.component.html <button mat-button class="button" (click)="openDialog()" matTooltip="Åpne" aria-label="Åpne"> ÅPNE</button>

And then deploy the whole project as an Angular Element.

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

Angular CLI: 7.3.6 Node: 10.15.2 OS: win32 x64 Angular: 7.2.10 @angular/material 7.3.5 typescript 3.1.1 Chrome Version 73.0.3683.86 (Official Build) (64-bit)

Is there anything else we should know?

Every time i hover on the button, a small grey “blob” is added to a “row” under the address-field in my browser.

When i click the button, a “tick()” is triggered (because angular elements needs that without ngZone) and the row of grey blobs is replaced with the tooltip. It’s in the wrong spot, but it’s there. I suspect this has something to do with how “Angular Elements” work? Since the grey blobs were only “converted” to the tooltip after a “tick()”?

@levgaas posted the same issue a year ago, but did not specify how he managed to fix it: https://github.com/angular/material2/issues/11361

[xigolle]

Is there any progress/solution for this problem. We are also experiencing the same isue with the tooltips.

[turbolego]

Just in case anyone else has problems with this, we ended up “hiding” the original tooltips in the paginator and adding our own using “pure css”. It’s not pretty, but it works while this gets sorted out.

in styles.scss (to hide the existing tooltip):

mat-tooltip-component > .mat-tooltip { display: none; }

Added the following code to the .scss file of the component where we have the paginator: (Stole some code from this guide by @yjose: https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346)

:root {
  --paginator-next-button: "Next Page";
  --paginator-previous-button: "Previous Page";
}

.mat-paginator-navigation-next::after {
  content: var(--paginator-next-button);
}
.mat-paginator-navigation-previous::after {
  content: var(--paginator-previous-button);
}

.mat-paginator-navigation-next:hover::after,
.mat-paginator-navigation-next:hover::before,
.mat-paginator-navigation-previous:hover::after,
.mat-paginator-navigation-previous:hover::before {
  opacity:1;
  transition:opacity  0s linear 1s;
}

.mat-paginator-navigation-next,.mat-paginator-navigation-previous {
  position:relative;
  display:inline-block;
}

.mat-paginator-navigation-next::before,.mat-paginator-navigation-previous::before{
  position: absolute;
  bottom: -35px;
  left: 50%;
  padding: 8px;
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s ease-in-out;
  transform-origin: top;
  background: #616161e6;
  color: white;
  border-radius: 2px;
  font-size: 12px;
  font-family: Roboto,sans-serif;
  font-weight: 400;

}

.mat-paginator-navigation-next::after,.mat-paginator-navigation-previous::after{
  position: absolute;
  left:50%;
  top:-6px;
  transform: translateX(-50%)   translateY(-100%);
  background: #616161e6;
  color: white;
  text-align: center;
  line-height: 1.5;
  padding:4px 2px;
  font-size: 12px;
  min-width: 80px;
  border-radius: 5px;
  pointer-events: none;
  padding: 4px 4px;
  z-index:99;
  opacity:0;
}