Javascript Highcharts 工具提示溢出已隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10734746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts tooltip overflow is hidden
提问by AlexRebula
My problem is that when the chart drawing area of is smaller than a highchart tooltip, a part of the tooltip is hidden where it overflows the chart drawing area.
我的问题是，当 的图表绘制区域小于 highchart 工具提示时，工具提示的一部分被隐藏在它溢出图表绘制区域的地方。
I want the tooltip to be visible all the time, no matter the size of the chart drawing area.
无论图表绘制区域的大小如何，我都希望工具提示始终可见。
No CSS setting helped and no higher z-index setting helped either.
没有 CSS 设置有帮助，也没有更高的 z-index 设置有帮助。
Here is my example... http://twitpic.com/9omgg5
这是我的例子... http://twitpic.com/9omgg5
Any help will be mostly apreciated.
任何帮助将主要受到赞赏。
Thank you.
谢谢你。
采纳答案by AlexRebula
OK, sorry for the delay. I could not find a better solution, but I found a workaround.
好的，抱歉耽搁了。我找不到更好的解决方案，但我找到了解决方法。
Here is what I did and what I suggest everyone to try:
以下是我所做的以及我建议大家尝试的方法：
Set the tooltip.useHTML property to true(now you can have more control with html and CSS). Like this:
将 tooltip.useHTML 属性设置为 true（现在您可以对 html 和 CSS 进行更多控制）。像这样：
tooltip: {
useHTML: true
}
Unset all the default tooltip peopertiesthat may have something to do with the default tooltip functionalities. Here is what I did...
取消设置所有可能与默认工具提示功能有关的默认工具提示peoperties。这是我所做的...
tooltip: {
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
Make sure that your chart container's css property "overflow" is set to visible.Also make sure that all DOM elements (div, section, etc....) that hold your chart container also have the css "overflow" property set to "visible". In this way you will make sure that your tooltip will be visibile at all times as it overflows his parent and his other "ancestors" (Is this a correct term? :)).
确保您的图表容器的 css 属性“溢出”设置为可见。还要确保包含图表容器的所有 DOM 元素（div、section 等...）也将 css“overflow”属性设置为“visible”。通过这种方式，您将确保您的工具提示始终可见，因为它溢出了他的父母和他的其他“祖先”（这是一个正确的术语吗？:)）。
Customize your tooltip formatter as you wish, using standard CSS styling.Here is what I did:
使用标准 CSS 样式，根据需要自定义工具提示格式化程序。这是我所做的：
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
}
This is how it all looks like:
这就是它的样子：
tooltip: {
tooltip.formatter: {
< div class ="tooltipContainer"> Tooltip content here < /div >
},
useHTML: true,
shared: false,
borderRadius: 0,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none'
}
If you have a better solution, please post.
如果您有更好的解决方案，请发布。
回答by qasem
This css helped me:
这个css帮助了我：
.highcharts-container { overflow: visible !important; }
回答by Halvor Holsten Strand
A modern approach (Highcharts 6.1.1 and newer) is to simply use tooltip.outside(API):
一种现代方法（Highcharts 6.1.1 和更新版本）是简单地使用tooltip.outside（API）：
Whether to allow the tooltip to render outside the chart's SVG element box. By default (
false), the tooltip is rendered within the chart's SVG element, which results in the tooltip being aligned inside the chart area. For small charts, this may result in clipping or overlapping. Whentrue, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.
是否允许工具提示在图表的 SVG 元素框之外呈现。默认情况下 (
false)，工具提示在图表的 SVG 元素内呈现，这导致工具提示在图表区域内对齐。对于小图表，这可能会导致剪切或重叠。当 时true，会创建一个单独的 SVG 元素并将其覆盖在页面上，从而允许工具提示在页面内部对齐。
Quite simply this means setting this one value to true, for example:
很简单，这意味着将这个值设置为true，例如：
Highcharts.chart('container', {
// Your options...
tooltip: {
outside: true
}
});
See this JSFiddle demonstrationof how setting this value to truefixes space/clipping issues.
请参阅此 JSFiddle 演示，了解如何设置此值以true修复空间/裁剪问题。
回答by Kloe2378231
Adding simply this CSS worked in my case (minicharts in table cells):
在我的情况下简单地添加这个 CSS（表格单元格中的小图）：
.highcharts-container svg {
overflow: visible !important;
}
The tooltip option useHtml was not required:
不需要工具提示选项 useHtml：
tooltip: {
useHTML: false
}
Works on both IE8/9 & FF33.1 (FF was causing trouble).
适用于 IE8/9 和 FF33.1（FF 引起了麻烦）。
回答by kesm0
I recently got the same problem, but with bootstrap container ! (bs3)
我最近遇到了同样的问题，但是使用引导容器！(bs3)
None of those solutions worked but I found by my own.
这些解决方案都没有奏效，但我自己找到了。
Its due to bootstrap _normalizer properties
这是由于 bootstrap _normalizer 属性
svg:not(:root) {
overflow: hidden !important;
}
So add both :
所以添加两个：
.highcharts-container, svg:not(:root) {
overflow: visible !important;
}
回答by nsacerdote
I know the question is old but I just wanted to share my solution, it's based on the other two answers but I think that you obtain a better-looking result with this code:
我知道这个问题很老，但我只是想分享我的解决方案，它基于其他两个答案，但我认为您可以使用以下代码获得更好看的结果：
Tooltip options:
工具提示选项：
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:
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*/
}
