ag-chart-tooltip 未显示工具提示 - css 未被应用程序接收

Question

我正在使用 ag-charts 在我的 angular 应用程序中绘制一个简单的折线图。尽管正在绘制图表，但当我将鼠标悬停在数据点上时，我没有看到显示工具提示。

但是我确实在工具提示内容中填充了工具提示内容（请参见屏幕截图）。

如何调试它以查看是什么阻止了它的显示？不过，我在 chrome 控制台上没有看到任何错误。

更新：正如 @Osy4C 所指出的，此问题的根本原因是不透明度设置为 0 。在浏览器上将其设置为 1 会显示工具提示。但是，该应用程序不会从 css .

中提取它

我应该如何完成这项工作？

我在该组件的 .css 文件中尝试了以下内容，但均无效。它不会被应用程序拾取，并且在应用程序加载时默认情况下不透明度设置为“0”。

ag-chart-tooltip {
  opacity: 1; 
}
.ag-chart-tooltip-visible { opacity: 1; }

Answer 1

如果不可见，工具提示的不透明度为 0。

把这个放在 css:

.ag-chart-tooltip-visible { opacity: 1; }

Answer 2

好的，通过阅读更多内容，我通过在组件中设置属性“encapsulation: ViewEncapsulation.None”使工具提示出现。像这样:

@Component({
  selector: 'app-results-timeline',
  templateUrl: './results-timeline.component.html',
  styleUrls: ['./results-timeline.component.css'],
  encapsulation: ViewEncapsulation.None
})

结果-timeline.component.css 文件包含：

.ag-chart-tooltip  {
  opacity: 1 ; 
}

ag-chart-tooltip 未显示工具提示 - css 未被应用程序接收

ag-chart-tooltip is not displaying the tooltip - css not getting picked up by the app

html

css

ag-grid

angular