Question

当前，我正在尝试设置工具提示的样式，当您将鼠标悬停在具有动态内容（公司名称）的地图图像上时。

我的目标是将背景设置为特定颜色，为字体赋予颜色，并应用CSS属性“ box-shadow”。

对于第一个目标，我尝试使用“ fill”属性，如下所示：

mapImageSeries的类型为am4maps.MapImageSeries。

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

使用

却不起作用

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.

第二个目标是为字体设置颜色属性，但没有找到与box-shadow css属性相同的属性。

是否可以为工具提示附加一个CSS类，以便我可以轻松地通过CSS设置样式？以及如何使用我面临的要求？

Answer 1

默认情况下，工具提示会从其相关对象中提取颜色，因此要操作其样式，您首先必须turn that off，例如：

this.mapImageSeries.tooltip.getFillFromObject = false;

您可以执行以下操作：

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

您可以应用the DropShadow SVG filter，而不是修改CSS box-shadow。 Tooltip个过滤器，实际上是一个DropShadow过滤器，我们可以对其进行修改：

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

要修改Tooltip文本样式，它们实际上通过其Label属性具有自己的label子元素。您可以通过两种方式修改颜色，第一种方法类似于上述方法，例如如果要为工具提示文本设置默认颜色：

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

为文本着色以及应用其他CSS样式的另一种方法是在tooltipText字符串中使用Visual formatting，例如：

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

text-align是无法通过视觉格式设置的一种样式，您需要通过SVG属性（例如

）来实现

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

我在这里为您做了一个演示：

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

希望这会有所帮助，让我知道这是否有意义。

如果您仍然希望使用字面上的CSS来满足自己的需求，请告诉我，我会尽力与您联系。

AmCharts（V4）中的样式工具提示

1 个答案: