Ngx-charts: Styling tooltips

[rtodo]

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 ?

[tommmn]

@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

[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);
}

[ahmedkhairydev]

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);
}

Thank You ❤❤

[SammyDodgerr]

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);
}

You are a hero, thank you. How did you find these class paths?

[mardon1975]

I was able to use this as an example only had to make one change. I had to go into my component and setting the encapsulation to "ViewEncapsulation.None" then I had no problems formatting the tool tip.

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);
}

[eyesfree]

I was able to use this as an example only had to make one change. I had to go into my component and setting the encapsulation to "ViewEncapsulation.None" then I had no problems formatting the tool tip.

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);
}

This is genious! I spent so much time already trying to find out why it is either global styles or ng-deep... Thanks a lot mardon1975 :)

[shrikanthsp22]

This works all the time, but i want to change the tooltip colour only when the theme is dark, so i tried using the classes inside :host-context(.dark){}, but they don't work anymore, kindly help. I tried changing view capsulation to None as well but, no luck