ハイチャートのツールチップに、useHTML
を使ってzIndexを置いて別のHTML要素に配置しようとしています。 - の代わりに、その下に、私は、ツールチップがピンク色のボックスの上に行きたいhttp://jsfiddle.net/sDu8V/highchartsツールチップz-インデックス
:
このフィドルを参照してください。私には何が欠けていますか?グラフ全体がtotalllyいずれかを超えるかまたは両方あなたのピンクの下にある単一のSVGオブジェクトに描画されているので
ハイチャートのツールチップに、useHTML
を使ってzIndexを置いて別のHTML要素に配置しようとしています。 - の代わりに、その下に、私は、ツールチップがピンク色のボックスの上に行きたいhttp://jsfiddle.net/sDu8V/highchartsツールチップz-インデックス
:
このフィドルを参照してください。私には何が欠けていますか?グラフ全体がtotalllyいずれかを超えるかまたは両方あなたのピンクの下にある単一のSVGオブジェクトに描画されているので
考えられる解決策:http://jsfiddle.net/sDu8V/1/
必要なCSS:
.highcharts-container {
position: inherit !important;
}
.highcharts-tooltip {
z-index: 9998;
}
@Piotr、4.1.xの更新されたデザインに感謝します。
あなたはピンクの箱の上にレンダリングされ得るためにのみツールチップを持つことができません。
あなたができることは、背景を透明にして、ピンク色のボックスの上にチャート全体をレンダリングすることです。
あなたのチャート:
chart: { backgroundColor:'transparent' }
あなたのdivも、チャートの下に次のようになります。
<div id="box" style="z-index:0"></div>
申し訳ありません@PawełFus、しかし、私はこれがどのように問題を解決しているのか分かりません。 jsfiddleでは、まだピンクのボックスがツールチップを覆っていて、ツールチップを変更することはできません。私はChromeとSafariでテストしました。確認して確認していただけますか? – frandevel
ホバーIE - >ツールチップはピンクのボックスの上に表示されます。 –
あなたのソリューションにマイナーな変更を加えました:http://jsfiddle.net/sDu8V/24/マージンを削除し、改善されたコンテンツツールチップ。 – Piotr