Change tool-tip background color in Angular

Question

I have a tooltip, and I want to change his background. The default background is black.

 <ng-template #start>Start</ng-template>
 <button [ngbTooltip]="start"  type="button" class="btn btn-outline-danger">
     <i class="fa fa-play" aria-hidden="true"></i>
 </button>

Could you, please, help me with this?

Answer 1

There need to be couple of css changes,

Check stackblitz demo Here

You need to add below css to the root style file. Replace red with your desired color.

/* Add application styles & imports to this file! */

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

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before{
  border-left-color:red!important;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before{
  border-top-color:red!important;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before{
  border-bottom-color:red!important;
}

Answer 2

You can write a class (e.x tool-info-class) and add on your tooltip

.tool-info-class .tooltip-inner {
  background-color: #fff;
}

tooltipClass="tool-info-class"

An example https://stackblitz.com/edit/angular-yo7esv

Answer 3

In your HTML, add tool-tip-btn to your button’s class attribute, making it like this:

class="btn btn-outline-danger tool-tip-btn"

Then in your CSS, refer to that class:

.tool-tip-btn {
  background-color: #ccc;
}

Answer 4

Its define in their OFFICIAL DOC Here

<button type="button" class="btn btn-outline-secondary" ngbTooltip="Nice class!"
  tooltipClass="my-custom-class">
  Tooltip with custom class
</button>

and in you TS

styles: [`
    .my-custom-class .tooltip-inner {
      background-color: darkgreen;
      font-size: 125%;
    }
    .my-custom-class .arrow::before {
      border-top-color: darkgreen;
    }
  `]

and the link for more info

Answer 5

Below has worked for me earlier

::ng-deep .tooltip-inner {
    background-color:#707070!important
}