javascript - 鼠标悬停时工具提示未正确显示

Question

我正在研究 angularjs 谷歌图表。我想显示图表的水平滚动条，默认情况下它应该从右向左滚动。

在应用 css 代码从右向左滚动之前的工作演示(鼠标悬停时的工具提示按预期显示): Working Demo before horizontal scrollbar is applied from right to lefft

应用CSS代码从右向左滚动后的演示 Demo, tooltip is not showing as expected when mouseover on the bar

html代码:

 <div ng-controller="myController" style="width:100%;height:50%;margin-left:0;white-space: nowrap;overflow-x:auto;overflow-y:hidden;direction:rtl;left:0;top:0;">
   <div style="width:90%;height:90%;" google-chart chart="myChart">
   </div> </div>

CSS 代码:

div[aria-label="A tabular representation of the data in the chart."] {
  left: 0 !important;}

问题是工具提示 onmouse over 在栏上，有任何输入吗？

Answer 1

您需要将包含图表的 div 更改为:

 <div style="width:100%;height:50%;margin-left:0;white-space: nowrap;overflow-x:auto;overflow-y:hidden;right:0;top:0;">

可以测试一下here .