tooltip: buggy when deployed as an Angular Element

[turbolego]

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: #11361

[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;
}

[Varuna15]

Even i am facing the same issue in my project. Do we have solution or a fix for getting around this issue?

[Splaktar]

Can you please post a StackBlitz reproduction?

[turbolego]

This is also happening with mat-option drop downs... they "expand" in the top left corner in my Angular Elements 😶
Is it common for stuff to end up in the top left corner if you deploy as Angular element?

[Splaktar]

@turbolego there are a number of open issues related to Angular Elements. There is no official demo or testing of Angular Material with Angular Elements at this time. We only do some basic testing with Angular Elements in the dev-app. So there's currently no canonical example to compare against.

Please provide a GitHub repo and/or StackBlitz that reproduces this issue so that it can be investigated.

[noonhe]

I'm facing the same problem. I'm using Angular/cli 8.2.2 , angular/material 8.1.3
I have a mat-accordion that has two mat-expansion-panels and in both of them there's mat-tab-groups and in each tab there's an ag-grid. each ag-grid has a column with a custom cell renderer component that includes a set of mat-icon-buttons and each button has a matTooltip value.
it works fine in all ag-grids of the fisrt mat-expansion-panel. and for the second mat-expansion-panel the ag-grid in the first mat-tab shows matTooltips fine. but rest of the tabs have this problem in displaying matTooltip values. I think the problem is with mat-tab because when I put those grids outside of the mat-tab-group it shows the tooltip.
I'm sorry I can't share my code here.
is there any solution?

[Splaktar]

@noonhe are you able to create a StackBlitz or GitHub reproduction so that we can start investigating and debugging this? Otherwise, it's most likely just going to continue to sit in this same state.

[noonhe]

I created a simple example similar to what I'm doing at my real project. it's still has that problem when I hover on the edit button in ag-grid.
here's the stackblitz code: https://stackblitz.com/github/noonhe/material-tooltip-example
I don't know if the problems is with tooltip or tabs because when I bring grids out of tabs they can show tooltips.

[turbolego]

I created a simple example similar to what I'm doing at my real project. it's still has that problem when I hover on the edit button in ag-grid.
here's the stackblitz code: https://stackblitz.com/github/nbwiyrjar
I don't know if the problems is with tooltip or tabs because when I bring grids out of tabs they can show tooltips.

Is the link broken or is it just me? 😶

[noonhe]

sorry. I fixed it.

[turbolego]

sorry. I fixed it.

For me stackblitz just says "Starting dev server" forever.
Does it work for you?