Add custom class to tooltips - ngbTooltipClass

A great feature could making us able to set a custom class on tooltip for setting custom styles depending about this classe.

For example, in my case, I display a variable score in a <i> tag, and each tag have color depending of its score (eg: 3/10 => .red class).

It would be wonderfull if I could set a class by the way of interpolation :

<ul>
    <template ngFor let-score [ngForOf]="scores | orderBy: ['label']">

        <template #tipScore>{{score.label}} : <strong>{{score.score}}</strong> /10</template>

        <li *ngIf="score.name != 'general'">
            <i [ngbTooltip]="tipScore" [ngbTooltipClass]="(score.note | colorScore)"></i>
        </li>
        
    </template>
</ul>

The class should set through a [ngbTooltipClass] (in my case the classname would be returned by pipe colorScore).

Edit : There is a poor way to perform this, but which has its own limits and depends of the state of [container].

When the default behavior is running the container is the element where the [ngbTooltip] directive is attached. (in my case this is <i>), we could provide custom styles.

Example :

1. Attach a class to the element node which contains the tooltip : <i class="yellow" [ngbTooltip]="tipScore"></i>

2. Then use this selector for cover the tooltip and setting some styles :

[ng-reflect-ngb-tooltip].yellow + .tooltip {
    background-color: yellow;
}

But when the [container] is changes to body, I unknown a way to target the tooltip and apply a particular styles.

[Ismaestro]

Any updates?? this is mandatory, not a feature!!

[mfodor]

Another use case is when you need to set container to body. Then you have no control in CSS since the element is appended to body not as a child element. Coloring tooltips e.g. when displaying error indicators and details are in tooltip. This is my case.

Any updates?

@bastienmoulia do you have plans to make your PR accepted (#1951)?