Topic: Change tooltip color

anuragd7 free asked 4 years ago


Expected behavior How can I set a custom color as the background and text color in a tooltip.

    <button
            mdbBtn
            type="button"
            color="primary"
            class="waves-light"
            mdbWavesEffect
            (click)="submit()"
            [mdbTooltip]="toolTipMsg"
   >
    <mdb-icon fas icon="tick" class="mr-1"></mdb-icon>Submit
   </button>

Bartosz Termena staff answered 4 years ago


Dear @anuragd7

Try to add this styles to your styles.scss

 .tooltip-inner {
  background-color: red;
  color: blue;
}
// tooltip placement top
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^='top'] .arrow::before {
  border-top-color: red !important;
}
// tooltip placement bottom
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^='bottom'] .arrow::before {
  border-bottom-color: red !important;
}
// tooltip placement right
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^='right'] .arrow::before {
  border-right-color: red !important;
}
// tooltip placement left
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^='left'] .arrow::before {
  border-left-color: red !important;
}

Hope it helps!

Best Regards, Bartosz.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.4.0
  • Device: mac
  • Browser: chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No