Globally it can be something like
.tooltip-inner {
color: #fff !important;
background-color: #000 !important;
}
Note: you need to have these styles in a global styles file not component styles file.
OR
You can use Component level styling options:
import { Component } from '@angular/core';
@Component({
selector: 'demo-tooltip-styling-local',
templateUrl: './styling-local.html',
/* tslint:disable no-unused-css*/
styles: [
`
:host >>> .tooltip-inner {
background-color: #009688;
color: #fff;
}
:host >>> .tooltip.top .tooltip-arrow:before,
:host >>> .tooltip.top .tooltip-arrow {
border-top-color: #009688;
}
`
]
})
export class DemoTooltipStylingLocalComponent {}
Or use Custom class
<button type="button" class="btn btn-primary"
tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." containerClass="customClass">
Demo with custom class
</button>