Highcharts: ツールチップが別のDOM要素でオーバーフローしている

_回避策_
カスタムhtml <div>を使用し、CSSスタイルを適用します。

デモ：

• http://jsfiddle.net/7wVDV/147/

回避策

元のツールチップの小さなポインタを保持できる別のアプローチもあります。 ツールチップを別のsvgボックスに配置します：http： //jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside -箱/。

@sebastianbochanありがとうございます。これらは良いアプローチのようですが、私の問題は解決しません。前述したように、 overflow：scrollを使用してチャートをdivでラップしているからです。
問題がないかこのフィドルをチェックしてくださいhttp://jsfiddle.net/7wVDV/201/

その他の回避策は次のとおりです。http： //jsfiddle.net/highcharts/7wVDV/202/

回避策をありがとう、 @ TorsteinHonsi 、私はそれを試してみます。
将来のリリースで実装するのを楽しみにしているオプション「appendToBody」はありますか？

@TorsteinHonsi回避策にはいくつかの問題があります。

1. ツールチップが画面の端に作成されている場合、スクロールバーが本体に表示されます。 http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ （デモウィンドウの幅を2チャート幅に設定し、最初にホバーします右からポイント）

2. IE11では、setSize（JS行86）は小さなビューボックスを作成していません。 たとえば、このデモでは、ChromeのカットツールチップとIE11の通常のツールチップを示しています。 http://jsfiddle.net/Lguddypf/

3. 表に表示していて、グラフを表示するためにスクロールする必要がある場合、ツールチップの位置が間違っています：http: //jsfiddle.net/Lguddypf/1/ （サイトをグラフにスクロールし、ポイントにカーソルを合わせると、ツールチップの位置が左に移動しました。

iPadまたはChromeでhttp://jsfiddle.net/1jp9e4rw/3/show/を開いてください。 データポイントの下に表示されるツールチップのアンカーは表示されません。

これは、ツールチップのアウトサイドボックススタディの問題です。 標準の実装では、ツールチップは問題ありません。

上記の問題の回避策：http： //jsfiddle.net/1jp9e4rw/9/

@pawelfus実際にコードで同様の回避策（H.wrap（））を試しましたが、回避策では問題が完全に解決されないことがわかりました。たとえば、この場合、パフォーマンスとアクセシビリティの問題が発生する可能性があります。 、Safariブラウザでも、ツールチップの位置はChromeブラウザと同じように計算されません。 したがって、コンシューマー側でラップを使用してバグを解決しようとする代わりに、highchartsがネイティブコードでこの問題を修正することは非常に便利です。

このバグは1年以上前に提出されているようです。 このバグを修正するためのタイムラインまたは計画はありますか？

このバグのネイティブ修正も必要です。
jQueryスクリプトのコピーは正しく機能していないようですが、場合によってはさらに悪化します。

プラグインベースのソリューションに依存する代わりに、ネイティブ修正の場合も+1。 この問題は、アプリケーションでも実行されています。

これがPawełによって提案された回避策ですが、jQueryはありません（ウィンドウとドキュメントのサイズを取得するために同じ計算が使用されます） -http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

あまり良い回避策ではありません:(

こんにちは@MiroLiska
スクロールバーのスタイルとJSFiddleロゴエラーから推測します-それはIE11です。
そのブラウザでは、 Pawełのデモは同じように見えます-jQueryの依存関係を削除しただけで、コード/ロジックは何も改善されていません。
ところで：それはスクロールによって引き起こされます

これはどう？ http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
スクロールバーのジャンプを回避するためにアニメーションを無効にしましたが、ツールチップのアニメーションをラップして、使用可能なスペースでのみアニメーション化するか、スクロールバーアクションをトリガーしないようにすることができます。

@KacperMadejどうもありがとうございました！ アプリで同様の問題が発生しており、他のDOM要素とオーバーラップするためのツールチップが必要です。 新しいソリューションの方がはるかに優れています。 ただし、複数のシリーズの折れ線グラフがある場合、ツールチップにカーソルを合わせて別のシリーズに移動すると、何も起こらず、エクスペリエンスが良くないというわずかな遅延が発生するという批判があります。

ここでの問題は、ツールチップにカーソルを合わせてもmouseOverイベントが発生しないことだと思います。 しかし、それは単なる仮定です

また、別のコメントは、これをuseHTMLでフォーマットおよびスタイル設定する必要があるということです。 私の知る限り、このプラグインを使用すると、 useHTMLを使用してカスタムフォーマットを適用することはできませんね。

こんにちは@jackyliang

mouseOverとホバリングツールチップ（Highcharts v4.0周辺）にはずっと前にバグがありました-最も近いポイントを検索するためにkd-treeを使用するので、これは問題ではないはずです。 多分それは回帰ですか？ jsFiddleで問題を再現して共有できますか？ ありがとう！

useHTMLに関して-はい、それは制限です。

ここで本当に必要なのは、チャートとはまったく関係のないスタンドアロンのツールチップだと思います。 たとえば、マウスオーバーで更新され、マウスアウトで非表示になる単純な<div>を使用できます。デモ：http： //jsfiddle.net/BlackLabel/xctq42n8/1/-ツールチップ内に何でも書き込むことができます。改善が必要なのはポジショニングだけです（デモではチャートに対するポイントの位置のみが使用され、ドキュメント内のチャートの位置が欠落しています）。

@pawelfusこんにちはPawel。 現在6.1を使用しています（チェックしたばかりです）。 useHTMLの欠如は、他のDOM要素をオーバーフローさせることができたとしても、一種の大きな問題です。 私たちのチームは、古いd3チャートのHighchartsへの移行を約95％完了しています（これは楽しい経験でした：D）が、各チャートは独自の要素に存在するため、従来、ツールチップは他のdom要素をオーバーフローします。 したがって、現在Highchartsを使用すると、次のようになります。

お分かりのように、古いツールチップに100％一致するようにuseHTMLを使用したカスタムスタイルがあります。

多くのカスタムコードを記述せずにこのオーバーフロー動作をサポートするHighchartsによるネイティブソリューションがある可能性はありますか？

こんにちは@jackyliang 、
現時点では、このソリューションは回避策としてのみ利用できます。

@pawelfusこんにちはPawel、私はまた、私たちがここでネイティブソリューションを取得している可能性がどのようにあるか知りたいですか？
Highchartsを選択したのは、そのようなものの回避策を実装したくなかったためです。多くの人がこの問題に遭遇しているようです。
ここで説明するすべての回避策にはいくつかの欠点があるように思われるため、これに対するクリーンなネイティブソリューションを取得することは、私にとって正しいステップのように思えます。

@sebastianbochanだからこそ、ネイティブソリューションを取得している可能性を知りたいのです。 このような素晴らしいライブラリの場合、このような大きな欠点があることは受け入れられないと思います。

@jackyliang @robinv親切な言葉をありがとう！ :)

@jackyliang @robinv-この問題の人気を考えると、この問題を解決する必要があります。 現在、ETAを設定することはできません。

内部メモ：
解決策は、TooltipクラスをChartクラスから分離し、独立した要素（本体？）でレンダリングすることです。 ここでの問題は、ツールチップとチャート/ポインタークラスの分離である可能性があります（高度なストックデモで試したので注意が必要です）+ツールチップの画像へのエクスポートを中断する可能性があります（ tooltip.refresh()経由）。 それでも、これをv7に実装するのは良いことです。stock-toolsボタン/menu-itemsにinitiateTooltipインスタンスを使用して、必要に応じて使用できます。 @TorsteinHonsi

@robinvが言ったことに非常に賛成です。これは、Highchartsに切り替えた主な理由の1つでもあり、カスタムコードを書きすぎないようにしたかったからです。 私たちの古いd3チャートには多くのカスタム拡張機能/拡張機能があり、しばらくすると変更を加えるのは混乱と悪夢になりました。 HCを自分の好みに合わせてカスタマイズしたくないと言っているのではありません（カスタマイズ！=拡張機能）。主に拡張機能について話します。 デフォルトのHCがまだサポートしていないことを行う。

私たちの計画は、HC統合を2〜3週間以内に顧客に提供することであり、ツールチップが他のdom要素の上に表示されない場合、顧客は不満を言うでしょう。 私たちが得る最小値が、これがいつできるかについてのETAである場合、それは今のところ私を満足させるでしょう。それ以来、カスタムソリューションを作成しようとするか（今のところ）、Highchartsによるネイティブソリューションを待つかを確立できます。

@sebastianbochanポジショニングの側面が少し不安定なので、回避策は実際には解決策ではないことに注意したかった

DOMがオーバーラップしている現在のツールチップの動作（ポジショニング/ホバーの不安定さなしで、カスタムHTMLの使用を可能にする）をエミュレートするネイティブ実装またはプラグインのETAを見ることができてとてもうれしいです。

@pawelfusと@jackyliangに感謝します。

Pawel、Jackyが述べたように、今後2〜3週間でお客様にHighchartsをリリースする予定であり、これが実装の主要な阻害要因の1つです。 これは機能ではなくバグであるため、これは今後2〜3週間で対処する予定ですか？

こんにちは@pawelfus私はこれをフォローアップして、これについてもっと明確になったかどうか/いつ知ることができるかを確認したいと思いましたか？ これは現在の計画プロセスにとって重要であるため、詳細情報を待っています。 ありがとう！

こんにちは@wynnandrewj 、ETAが決定したら、このスレッドを更新します。 今後2〜3週間でv6.1.1をリリースする予定ですが、この問題の修正が含まれることを約束することはできません。

こんにちは@pawelfus 、この問題に関してあなたとあなたのチームにフォローアップしたかっただけです。 私たちは顧客向けのHighchartsの発売に非常に近づいており（顧客の最初のバッチでは最大2〜3週間と考えてください）、これは間違いなくブロッカーです。 正確な日付を指定するのは難しいことを完全に理解しているので、それは求めません。 しかし、これに取り組むかどうか、そしておそらくおおよそのタイムラインについての情報をいただければ幸いです。

基本的に、社内で理解でき、顧客とコミュニケーションできるものはすべて素晴らしいものになります。

ありがとう！

@jackyliangの忍耐に感謝します。今日はこのコードに取り組んでおり、残りの問題の概要を把握しようとしています。

これで、 http：//jsfiddle.net/highcharts/fqx10th9/でテストできる候補ができました。

上記の問題は修正されたと思います。つまり、 useHTML 、カーソルを上に移動すると点滅し、狭いページにスクロールバーが表示されます。

この候補をテストしてください。 成功した場合は、今週のリリースであるHighchartsv6.1.1の一部にします。

@TorsteinHonsiどうもありがとうございました！ これで遊ぶのが待ちきれません。

@TorsteinHonsi
私もテストしましたが、すべてのシナリオで機能します。

これは私たちにとって非常に完璧に機能し、30分ほどで追加できました。 これを非常に迅速かつ完璧に実装していただき、ありがとうございます。

@TorsteinHonsi https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.jsが存在しないため、フィドルは機能しなくなりました。 ブランチが削除されたと思います

@BernardoFBBraga

成功した場合は、今週のリリースであるHighchartsv6.1.1の一部にします。

そうだったので、そうしました。 Highchartsv6.1.1+を使用してこの機能を使用できます
APIリファレンス： https ：//api.highcharts.com/highstock/tooltip.outside
デモ：http： //jsfiddle.net/BlackLabel/c70h1akL/1/