我的问题是，当图表绘制区域小于高图工具提示时，工具提示的一部分被隐藏在超出图表绘制区域的地方。
我希望工具提示始终可见，无论图表绘制区域的大小。
没有 CSS 设置有帮助，也没有更高的 z-index 设置有帮助。
这是我的例子...http://twitpic.com/9omgg5
我们将非常感谢任何帮助。
谢谢。
【问题讨论】：
标签： javascript jquery tooltip highcharts
这个 CSS 帮助了我：
.highcharts-container { overflow: visible !important; }
【讨论】：
tooltip: { useHTML: true }
好的，抱歉耽搁了。我找不到更好的解决方案，但我找到了解决方法。
这是我所做的以及我建议大家尝试的：
将 tooltip.useHTML 属性设置为 true（现在您可以对 html 和 CSS 进行更多控制）。像这样：
tooltip: {
useHTML: true
}
取消设置所有可能与默认工具提示功能有关的默认工具提示操作。这就是我所做的......
tooltip: {
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
确保您的图表容器的 css 属性“溢出”设置为可见。同时确保所有包含图表容器的 DOM 元素（div、section 等...）将css“溢出”属性设置为“可见”。通过这种方式，您将确保您的工具提示始终可见，因为它会溢出他的父母和他的其他“祖先”（这是一个正确的术语吗？:)）。
使用标准 CSS 样式根据需要自定义您的工具提示格式化程序。这是我所做的：
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
}
这就是它的样子：
tooltip: {
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
},
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
如果您有更好的解决方案，请发布。
【讨论】：
现代方法（Highcharts 6.1.1 和更高版本）是简单地使用tooltip.outside (API)：
是否允许工具提示在图表的 SVG 元素框之外呈现。默认情况下 (
false)，工具提示在图表的 SVG 元素中呈现，这导致工具提示在图表区域内对齐。对于小型图表，这可能会导致剪切或重叠。当true时，会创建一个单独的 SVG 元素并覆盖在页面上，从而允许工具提示在页面内部对齐。
很简单，这意味着将这个值设置为true，例如：
Highcharts.chart('container', {
// Your options...
tooltip: {
outside: true
}
});
请参阅 this JSFiddle demonstration，了解如何将此值设置为 true 修复空间/剪裁问题。
【讨论】：
在我的情况下简单地添加这个 CSS （表格单元格中的小图表）：
.highcharts-container svg {
overflow: visible !important;
}
工具提示选项 useHtml 不是必需的：
tooltip: {
useHTML: false
}
适用于 IE8/9 和 FF33.1（FF 引起了问题）。
【讨论】：
我最近遇到了同样的问题，但是使用引导容器！ (bs3)
这些解决方案都不起作用，但我自己找到了。
这是由于 bootstrap _normalizer 属性
svg:not(:root) {
overflow: hidden !important;
}
所以添加两个：
.highcharts-container, svg:not(:root) {
overflow: visible !important;
}
【讨论】：
我知道这个问题很老，但我只是想分享我的解决方案，它基于其他两个答案，但我认为使用此代码可以获得更好看的结果：
工具提示选项：
tooltip: {
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none',
formatter: function() {
return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
}
}
CSS：
.highcharts-container {
overflow: visible !important;
}
.highcharts-tooltip span>span {
background-color:rgba(255,255,255,0.85);
border:1px solid;
padding: 2px 10px;
border-radius: 2px;
}
#divContainerId .highcharts-container{
z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}
【讨论】：
我只想添加一个示例并证明 .highcharts-tooltip-box 不必设置溢出即可工作。
/* .highcharts-tooltip-box {
visibility: inherit !important;
} */
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
【讨论】：
没有一个解决方案对我有用。当工具提示大于图表时，它根本不显示。
最终我们发现Highcharts其实隐藏了highcharts-tooltip-box类中的tooltip，所以解决方法是设置继承哪个类默认：
.highcharts-tooltip-box {
visibility: inherit !important;
}
在溢出之后仍然需要设置为可见：
.highcharts-container,
svg:not(:root),
.chart-container {
overflow: visible !important;
}
如果遇到任何问题，请确保将容器中的 z-index 设置得更高。
【讨论】：