Change Background Colour of Tooltips


Topic: Change Background Colour of Tooltips

sohamlite pro premium priority asked 10 months ago

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.


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
  • 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