matTooltipClass doesn't seem to work in 5.0 #8316
Comments
|
It looks like the class is added as expected based on this stackblitz. Can you provide a reproduction of the issue you are seeing? |
josephperrott
added
the
cannot reproduce
|
This is likely due to encapsulated styles. |
|
@willshowell It's possible you are right. @josephperrott https://stackblitz.com/edit/angular-material2-issue-qsyjju I modified your example to better match what I'm trying to do. As you can see the css class does not get applied if done this way. I also tried moving the class out to the styles.scss but no change. |
|
@gzamb I moved the style to the global styles and it appears to work fine, https://stackblitz.com/edit/angular-material2-issue-tgr3bd?file=app/app.component.ts Maybe this guide can help explain the behavior. |
|
Yeah I tried that in my app, it didn't work. I'll keep trying different combos but I just figured it should be applied directly overriding all the other classes |
|
@gzamb the problem with applying it directly is that (by default) the style is encapsulated to only your component. The tooltip (and other overlay-based components) create a new component instance and append it at the end of the |
|
@willshowell alright I found the combo that works in my global styles, thanks for the help |
|
@gzamb - any way you could comment on the solution which worked for you? |
|
I ended up creating a class but I placed it in my main styles.scss file. It was the only way it would work for me |
|
Thanks. I had tried that and it wasn't working, but due to some css specificity issues.. I ended up changing the class name and all was well. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Apply class passed in the [matTooltipClass]
What is the current behavior?
Class passed is not applied
What are the steps to reproduce?
Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on
@master): https://goo.gl/uDmqyYStackBlitz starter (using latest
npmrelease): https://goo.gl/wwnhMVadd a class and see if it gets applied
What is the use-case or motivation for changing an existing behavior?
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 5, Material 5, mac Sierra, Typescript 2.4.2, chrome
Is there anything else we should know?
The text was updated successfully, but these errors were encountered: