ag-chart-tooltip 未显示工具提示 - 应用程序未获取 css

Posted 2023-03-28

【中文标题】ag-chart-tooltip 未显示工具提示 - 应用程序未获取 css

【英文标题】：ag-chart-tooltip is not displaying the tooltip - css not getting picked up by the app

【发布时间】：2021-01-18 20:18:14

【问题描述】：

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

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

如何调试它以查看阻止它显示的原因？但我在 chrome 控制台上看不到任何错误。

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

我应该如何做这项工作？

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

ag-chart-tooltip 
  opacity: 1; 

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

【问题讨论】：

可以分享一下你的ts和html文件吗？

@Elmehdi，请看上面

【参考方案1】：

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

把这个放在css中：

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

【讨论】：

感谢您的意见。请阅读我对这篇文章的更新。我在这个组件的 .css 文件中尝试了以下内容，但它们都不起作用。它不会被应用程序拾取，并且在应用程序加载时默认情况下不透明度设置为“0”。 .ag-chart-tooltip 不透明度：1； .ag-chart-tooltip-visible 不透明度：1;

【参考方案2】：

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

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

并且 results-timeline.component.css 文件包含：

.ag-chart-tooltip  
  opacity: 1 ;