Highcharts工具提示溢出隱藏

我的問題是，當圖表繪圖區域小於高圖工具提示時，工具提示的一部分隱藏在溢出圖表繪製區域的位置。Highcharts工具提示溢出隱藏

我希望工具提示隨時都可見，不管圖表繪圖區的大小。

沒有CSS設置幫助，也沒有更高的Z指數設置幫助。

這裏是我的榜樣...... http://twitpic.com/9omgg5

任何幫助將主要apreciated。

謝謝。

來源

2012-05-24 AlexRebula

爲什麼不是這個問題標記爲 '回答'？幾乎每個答案都是正確的。 – Peter

好的，對不起，延遲。我找不到更好的解決方案，但我找到了解決方法。

這裏是我做什麼，我建議大家嘗試：

設置tooltip.useHTML屬性爲true（現在你可以有HTML和CSS更多的控制）。就像這樣：

tooltip: { 
    useHTML: true  
}

沒有設置所有的默認提示peoperties，可能有事情做與默認的提示功能。下面是我做的......

確保您的圖表容器的CSS屬性爲「溢出」設置爲可見。還要確保容納你的圖表容器的所有DOM元素（div，節等......）也將css「overflow」屬性設置爲「visible」。這樣你就可以確保你的工具提示在任何時候都是可見的，因爲它溢出了他的父母和他的其他「祖先」（這是一個正確的術語？:)）。

使用標準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' 
}

如果你有一個更好的解決方案，請郵寄。

來源

2012-06-11 07:14:54 AlexRebula

應該是最好的答案，幫了我很多。 –

這個CSS幫助我：

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

來源

2012-11-25 09:35:26 qasem

您必須添加，您必須設置'tooltip：{useHTML：true}' – Stefan

不適用於我，只將svg css屬性設置爲可見工作 – spuas

兩個.highcharts-container {overflow：visible！important; }和svg {overflow：visible; }。 – justinsAccount

我知道這個問題是舊的，但我只是想分享我的解決方案，它基於其他兩個答案，但我認爲你得到一個更好的看，結果驗證碼：

工具提示選項：

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*/ 
}

來源

2014-05-29 12:25:24 nsacerdote

添加只是這個CSS在我的情況下工作（在表格單元格minicharts）：

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

的提示選項useHtml並不要求：

tooltip: { 
    useHTML: false 
}

作品上都IE8/9 & FF33.1（FF造成麻煩）。

來源

2014-11-25 17:22:28 Kloe2378231

我最近得到了同樣的問題，但使用引導容器！（bs3）

這些解決方案都不起作用，但我自己找到了。

其由於引導_normalizer性能

svg:not(:root) { 
    overflow: hidden !important; 
}

所以添加兩種：

.highcharts-container, svg:not(:root) { 
    overflow: visible !important; 
}

來源

2017-03-07 13:01:39 kesm0

有趣的，我會試試這個。在我看來，highcharts應該解決這個問題 – Maccurt

Highcharts工具提示溢出隱藏

回答

相關問題