Topic: Change Background Colour of Tooltips

sohamlite priority asked 6 months ago


How to change background and text colour of tooltips globally in Angular using SCSS stylesheet?


Rafał Seifert staff answered 6 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 priority commented 6 months ago

Right! However, same is not true when one is using theme style.


Rafał Seifert staff commented 6 months ago

I've edited the post with theming example.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • 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