Topic: Change tooltip color
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>
Add comment
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: 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