styling tooltips in AmCharts (V4)

Question

currently im trying to style a tooltip which appears when you hover over an map image with dynamic content (title of the company).

My aim is to style the background to a specific color, give the font a color and also apply a CSS property "box-shadow".

For the first aim I tried to use the "fill" property like so:

mapImageSeries is of type am4maps.MapImageSeries.

this.mapImageSeries.tooltip.fill = am4core.color('#ffff00');

Which does not work however using

this.mapImageSeries.tooltip.background.cornerRadius = 0;  // will change the "border-radius" of the tooltip. 

this.mapImageSeries.tooltip.background.fill = am4core.color('#ffff00'); // does also not work.

For my second goal setting up a color property for the font I didn't find a property, same with the box-shadow css property.

Is it possible to attach a css class for the tooltip so I can easily style it via CSS? And how do I style the tooltip with the requirements im facing?

notacouch notacouch · Accepted Answer · 2018-10-20T01:49:39

By default, tooltips pull colors from their relevant object, so to manipulate their styles you'll first have to turn that off, e.g.:

this.mapImageSeries.tooltip.getFillFromObject = false;

You can then do:

this.mapImageSeries.tooltip.background.cornerRadius = 0;
this.mapImageSeries.tooltip.background.fill = am4core.color("#ffff00");

Instead of modifying CSS box-shadow, you can apply the DropShadow SVG filter. Tooltips have a single filter, actually a DropShadow filter out the box, which we can modify:

var dropShadow = this.mapImageSeries.tooltip.filters.getIndex(0);
dropShadow.dx = 3;
dropShadow.dy = 3;
dropShadow.blur = 5;
dropShadow.opacity = 0.7;

To modify Tooltip text styles, they actually have their own Label child via their label property. There are two ways you can modify color, first is like the method above, e.g. if you want to set a default color for tooltip text:

this.mapImageSeries.tooltip.label.fill = am4core.color("#e97f02"); // color from lolcolors: https://www.webdesignrankings.com/resources/lolcolors/#palette_18

Another way to color the text, as well as apply other CSS styles, is to use Visual formatting in your tooltipText string, e.g.:

this.mapImageSeries.tooltipText = "[font-size: 20px; #bd1550]{companyTitle}:[/]\n{locationTitle} branch";

One style that won't work via visual formatting is text-align, you'll need to do that through via SVG properties, e.g.

this.mapImageSeries.tooltip.label.textAlign = "middle";

I've made a demo for you here:

https://codepen.io/team/amcharts/pen/f6d4167ea7ccd5dd47054d2430443c0a/

Hope this helps, let me know if it's all making sense.

If you're still looking to use literally CSS for your own needs, let me know and I'll try to sort that out with you.

styling tooltips in AmCharts (V4)

1 Answers