javascript - HighChart 工具提示断字问题

Question

我搜索了很多，但没有找到适合我的问题的解决方案。我正在使用 HighChart 插件来创建饼图和条形图。

我的问题是，将鼠标悬停在任何条形图或饼图上后出现默认工具提示，因为我想使用 css 属性 word-break & white-space 在该工具提示中。现在，如果超出容器宽度，文本就会被剪切。

我尝试覆盖 .highcharts-tooltip CSS，但没有用。参见示例，将鼠标悬停在蓝色和黑色切片上，您将了解我面临的问题。

.highcharts-tooltip {
word-break: break-word !important;    
white-space: normal !important;   

这里是 JsFiddle

感谢任何帮助。

提前致谢

Answer 1

为了能够像这样自定义您的工具提示，您需要将工具提示选项 useHtml 设置为 true:

tooltip: {
  useHTML: true
}

来自 Higcharts 文档:

useHTML: BooleanSince 2.2

Use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables and images in the tooltip.

然后需要将CSS属性设置为.highcharts-tooltip的span元素(我也加了固定宽度):

.highcharts-tooltip span {
   width: 140px;
   white-space:normal !important;
}

工作 Fiddle