Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tooltip: buggy when deployed as an Angular Element #15781

Open
turbolego opened this issue Apr 10, 2019 · 16 comments
Open

tooltip: buggy when deployed as an Angular Element #15781

turbolego opened this issue Apr 10, 2019 · 16 comments

Comments

@turbolego
Copy link

@turbolego turbolego commented Apr 10, 2019

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.

Screenshot_188

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()"?

Screenshot_189

@levgaas posted the same issue a year ago, but did not specify how he managed to fix it: #11361

@andrewseguin andrewseguin added the P3 label Apr 12, 2019
@turbolego

This comment has been minimized.

Copy link
Author

@turbolego turbolego commented May 10, 2019

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

This comment has been minimized.

Copy link

@Varuna15 Varuna15 commented Jul 30, 2019

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

@Splaktar

This comment has been minimized.

Copy link
Member

@Splaktar Splaktar commented Aug 1, 2019

Can you please post a StackBlitz reproduction?

@turbolego

This comment has been minimized.

Copy link
Author

@turbolego turbolego commented Aug 7, 2019

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

This comment has been minimized.

Copy link
Member

@Splaktar Splaktar commented Aug 7, 2019

@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.

@Splaktar Splaktar changed the title [Tooltip] Is buggy when Angular 7 project is deployed as an Angular Element tooltip: buggy when deployed as an Angular Element Aug 7, 2019
@noonhe

This comment has been minimized.

Copy link

@noonhe noonhe commented Sep 30, 2019

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

This comment has been minimized.

Copy link
Member

@Splaktar Splaktar commented Sep 30, 2019

@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

This comment has been minimized.

Copy link

@noonhe noonhe commented Oct 4, 2019

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

This comment has been minimized.

Copy link
Author

@turbolego turbolego commented Oct 4, 2019

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

This comment has been minimized.

Copy link

@noonhe noonhe commented Oct 4, 2019

sorry. I fixed it.

@turbolego

This comment has been minimized.

Copy link
Author

@turbolego turbolego commented Oct 4, 2019

sorry. I fixed it.

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

@noonhe

This comment has been minimized.

Copy link

@noonhe noonhe commented Oct 4, 2019

sorry. I fixed it.

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

I don't know what the problem is. in both stackblitz and codesandbox it gets stuck on "starting dev server" and "installing dependencies". but it works when I run it on my computer.
can you please clone my repo and run it in your computer?
https://github.com/noonhe/material-tooltip-example

@Splaktar

This comment has been minimized.

Copy link
Member

@Splaktar Splaktar commented Oct 4, 2019

Both StackBlitz links are not found for me. Thank you for posting the GitHub repo.

@noonhe

This comment has been minimized.

Copy link

@noonhe noonhe commented Oct 15, 2019

I just found out if your grid has more than one pages, if you go to the second page there's no issue and it shows all tooltips correctly and even when you go back to the first page the issue is resolved and it works fine. the problem is only in the first page and until you don't change the page.!!! I hope this new information can be useful.

@xigolle

This comment has been minimized.

Copy link

@xigolle xigolle commented Feb 11, 2020

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

@devtronic

This comment has been minimized.

Copy link

@devtronic devtronic commented Feb 11, 2020

I had the same problem. The reason why the tooltip is displayed buggy is because the change detection won't work properly in some cases. In my specific case *ngFor had broke the change detection.

I solved the problem by using this package: https://github.com/remackgeek/elements-zone-strategy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
You can’t perform that action at this time.