Topic: Change Background Colour of Tooltips
How to change background and text colour of tooltips globally in Angular using SCSS stylesheet?
Rafał Seifert answered 10 months ago
In our official docs we have css and scss variables for most of the components that can be customized. In your example you should change those two and declare them before importing mdb.scss file.
$tooltip-color: red;
$tooltip-bg: cyan;
@import "mdb-angular-ui-kit/assets/scss/mdb.scss";
In case of theming you need to overwrite the styles manually in specific classes. That is because theming resolves after initialization of scss variables. Here is example:
@import "mdb-angular-ui-kit/assets/scss/mdb.scss";
$my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
$my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme
$my-theme: mdb-light-theme(
$my-theme-primary,
$my-theme-secondary
); // create the new theme using primary and secondary colors
// include theme styles
@include mdb-theme($my-theme);
.tooltip-inner {
color: red;
background-color: cyan;
}
sohamlite pro premium priority commented 10 months ago
Right! However, same is not true when one is using theme style.
Rafał Seifert commented 10 months ago
I've edited the post with theming example.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 5.2.0
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No