Components: matTooltipClass doesn't seem to work in 5.0
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/uDmqyY
StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV
add 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?
gzamb
All 11 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
on 8 Nov 2017
This is likely due to encapsulated styles.
willshowell
on 8 Nov 2017
@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
on 8 Nov 2017
@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.
willshowell
on 8 Nov 2017
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
on 8 Nov 2017
@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 <body>. Your view encapsulated styles will not be able to target the tooltip since it belongs to another component. That's why, even though the tooltip gets the correct class, your styles don't affect it. And that's why global styles or setting ViewEncapsulation.None are encouraged in this context.
willshowell
on 8 Nov 2017
@willshowell alright I found the combo that works in my global styles, thanks for the help
gzamb
on 8 Nov 2017
@gzamb - any way you could comment on the solution which worked for you?
parker789
on 18 Dec 2017
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
gzamb
on 19 Dec 2017
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.
parker789
on 19 Dec 2017
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
_This action has been performed automatically by a bot._
![angular-automatic-lock-bot[bot] picture](https://avatars.githubusercontent.com/in/40213?v=4&s=40)
angular-automatic-lock-bot[bot]
on 8 Sep 2019
Related issues
vanor89
路
3Comments
michaelb-01
路
3Comments
Hiblton
路
3Comments
julianobrasil
路
3Comments
xtianus79
路
3Comments
Most helpful comment
@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.