How to add custom class to ng-bootstrap tooltip

Question

I'm trying to add a custom class to an ng-bootstrap tooltip but it won't apply it.

HTML

<i class="fa fa-info-circle" aria-hidden="true" [ngbTooltip]="infoTooltipTemplate" [tooltipClass]="info-tooltip" placement="top"></i>

CSS

.info-tooltip .tooltip-inner {
  max-width: 340px;
  text-align: left;
  background-color: #fff;
  color: #000;
  border-radius: 30px;
  box-shadow: 0 0 3px #00000040;
}

The styling for the tooltip still remains the same as the default styling. I'm working on Angular 7 with @ng-bootstrap version 4.2.2

Answer 1

Here is the example of custom class from ng-bootstrap website. Link to stackblitz: link

HTML

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

CSS

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

I hope this helps.

Update

As Devin mentioned in the comment, you must add the custom styles in your global stylesheet. Thanks Devin.

Answer 2

You can use that in your css :

::ng-deep .tooltip-inner {
  max-width: 340px;
  text-align: left;
  background-color: #fff;
  color: #000;
  border-radius: 30px;
  box-shadow: 0 0 3px #00000040;
}

It also means that you can remove this : [tooltipClass]="info-tooltip"

So it'll just be :

<i class="fa fa-info-circle" aria-hidden="true" [ngbTooltip]="infoTooltipTemplate" placement="top"></i>