Styling tooltips

I would like to be able to put custom style to tooltips template.

I don’t really know how that kind of thing are handled in other library but just being able to inject css in the component style would already be quite usefull.

I already tried to reach the tooltips level with ::ng-deep like this:

Html:

<ng-template #tooltipTemplate let-model="model" class="tooltip">
    This is the single point tooltip template
   <pre class="test">{{model|json}}</pre>
</ng-template>

Less:

.tooltip::ng-deep {
  background-color: @white !important;
  border: 1px solid @silver !important;
 }

But it didn’t work, maybe there is a workaround ?

[rtodo]

@rtodo You have to wrap your data with a container and apply the class to it, not the template. So something like:

<ng-template #tooltipTemplate let-model="model">
    <div class="tooltip">
        This is the single point tooltip template
       <pre class="test">{{model|json}}</pre>
   </div>
</ng-template>

no need ::ng-deep

But what if I want to change the tooltip container background color ?

[akotynski]

Tooltip is a global element and cannot be styled with ::ng-deep. I was able to style the tooltip using global css styles:

ngx-tooltip-content.ngx-charts-tooltip-content.type-tooltip {
  .tooltip-caret.position-top {
    border-top-color: white;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  }

  background-color: white;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}