强制 Highcharts 在 div/container 之外显示工具提示

Question

[Highcharts]

你好，请问有没有办法在标签外显示工具提示？喜欢把它 "float" 放在容器外面，这样它就不会像下面那样被切断。

提前致谢。

这是一个 jsFiddle 示例，您可以使用它来重现该问题。（尝试将鼠标悬停在箱线图上）

http://jsfiddle.net/af3g18mo/ Code

Answer 1

在你的 fiddle 中我可以找出问题所在：

如果您在样式表中向上一层叠，您会看到您的路径和内容都在一个标记内。该标签的固定高度为 65 像素，没有溢出属性 - 但在 overflow:hidden 之前有一条路径。这就是为什么 highchart 工具提示和所有内容都被切断的原因。

您可以将高度动态更改为例如 40%，但如果工具提示中的内容较长，这并不能真正解决问题。但是你可以给你的 <svg> 一个 "overflow:visible;" 并用 visible 覆盖 ".highcharts-container" 中的 "overflow:hidden" - 所以像你的工具提示这样高度超过 65 px 的所有内容都是显示。

您可以在这里查看解决方案：小心更改这些内容，但在您的示例中，我看不到对此更改有任何不良反应。如果你必须给你的 css 整个路径而不是全局更改它。

http://jsfiddle.net/af3g18mo/2/

因此 css 的具体修复可能是：

svg{
    overflow:visible;
}
.highcharts-container{
    overflow:visible !important;
}

强制 Highcharts 在 div/container 之外显示工具提示

Force Highcharts to display tooltip outside of div/container

css

highcharts

tooltip