How to change default color of ngbTooltip?

Question

This is where I used ngbTooltip. How to change its color of text and background.

<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modal3" placement="end"
ngbTooltip="Will wait for action on file">Wait for a file</a></li>

Answer 1

You can apply custom css in tooltip by adding a class to it.

<a ngbTooltip="Will wait for action on file" tooltipClass="my-custom-class">Wait for a file</a></li> 

In your CSS :

.my-custom-class .tooltip-inner {
    background-color: your-background-color-here;
    color: your-text-color-here;
 }

 .my-custom-class.bs-tooltip-top .tooltip-arrow::before {
     border-top-color: your-background-color-here;
 }

Answer 2

Add a class in your html

<a class="dropdown-item"  data-bs-toggle="modal" data-bs-target="#modal3" placement="end"
[ngbTooltip]="Will wait for action on file" [tooltipClass]="mytooltip">Wait for a file</a></li>    

and in your component.css

:host ::ng-deep mytooltip {
//whatever you want 
}