Highcharts工具提示溢出被隐藏 [英] Highcharts tooltip overflow is hidden

问题描述

我的问题是，当图表绘图区域小于高图工具提示时，工具提示的一部分会隐藏在溢出图表绘图区域的位置。

我希望工具提示随时可见，不管图表绘制区域的大小如何。

没有CSS设置帮助，也没有更高的z-index设置。

这是我的例子... http://twitpic.com/9omgg5

任何帮助都会被折扣。

谢谢。

<解决方案

确定，对于延迟抱歉。我找不到更好的解决方案，但我找到了一个解决方法。

以下是我所做的以及我建议大家尝试的方法：

将tooltip.useHTML属性设置为true （现在可以使用html和CSS进行更多控制）。像这样：

 工具提示：{
 useHTML：true 
} 
  

取消所有可能与默认工具提示功能有关的默认工具提示属性。以下是我所做的...

 工具提示：{
共享：false，
 borderRadius：0 ，
 borderWidth：0，
 shadow：false，
启用：true，
 backgroundColor：'none'
} 
  

确保图表容器的css属性overflow设置为可见。还要确保所有DOM元素（div ，部分，等等......）持有你的图表容器也有CSSoverflow属性设置为可见。这样你就可以确保你的工具提示在任何时候都是可见的，因为它溢出了他的父母和他的其他祖先（这是一个正确的术语？））。

使用标准的CSS样式，自定义您的工具提示格式化程序。以下是我所做的：

  tooltip.formatter：{
< div class =tooltipContainer>工具提示内容< / div> 
 
  

---

这就是它的全部内容看起来像：

 工具提示：{
 tooltip.formatter：{
< div class =tooltipContainer>工具提示内容< / div> 
}，
 useHTML：true，
 shared：false，
 borderRadius：0，
 borderWidth：0，
 shadow：false，
 enabled：true，
 backgroundColor：'none'
} 
  

如果您有一个更好的解决方案，请发布。

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.

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.

Here is my example... http://twitpic.com/9omgg5

Any help will be mostly apreciated.

Thank you.

解决方案

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    
}

Unset all the default tooltip peoperties that may have something to do with the default tooltip functionalities. Here is what I did...

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? :)).

Customize your tooltip formatter as you wish, using standard CSS styling. Here is what I did:

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.

这篇关于Highcharts工具提示溢出被隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！