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

[StanlyLife]

For anyone still wondering about background colors.

I put this in global:

.ngx-charts-tooltip-content.type-tooltip {
  background-color: $light !important;
}

[RajkumarNavex]

::ng-deep 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); }

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

[morshedmasud]

How to make tooltips always appear?

[ahmedkhairydev]

How to make tooltips always appear?

@morshedmasud you can use showDataLabel input, or you can make the display of .ngx-charts-tooltip-content to block !important

[morshedmasud]

@ahmedkhairydev

bur for ngx-charts-bar-vertical-normalized chart there is no property called showDataLabel

[ahmedkhairydev]

bur for ngx-charts-bar-vertical-normalized chart there is no property called showDataLabel @morshedmasud

showDataLabel for basic & grouped bar charts only.

[morshedmasud]

is there any way to make tooltips always appear with ngx-charts-bar-vertical-normalized chart?