Highcharts: Tooltip wird von einem anderen DOM-Element überlaufen

_Abhilfe_
Verwenden Sie benutzerdefiniertes HTML <div> und wenden Sie CSS-Stile an.

Demo:

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

Problemumgehung

Es gibt auch einen alternativen Ansatz, mit dem Sie den kleinen Zeiger des ursprünglichen Tooltips beibehalten können. Es fügt den Tooltip in ein separates svg -Feld ein: http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside -Kasten/.

@sebastianbochan danke, das scheint ein netter Ansatz zu sein, aber es löst mein Problem nicht, denn wie gesagt, ich habe mein Diagramm in ein div mit overflow:scroll gewickelt.
Überprüfen Sie diese Geige auf ein Problem http://jsfiddle.net/7wVDV/201/

Die andere Problemumgehung funktioniert: http://jsfiddle.net/highcharts/7wVDV/202/

Danke, @TorsteinHonsi für die Problemumgehung, ich werde es versuchen.
Ist die Option 'appendToBody' etwas, auf das Sie sich freuen, es in der zukünftigen Version zu implementieren?

@TorsteinHonsi Es gibt einige Probleme mit der Problemumgehung.

1. Die Bildlaufleiste wird auf dem Körper angezeigt, wenn der Tooltip an einem Rand des Bildschirms erstellt wird. http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ (Stellen Sie die Breite des Demofensters auf 2 Diagramme ein und bewegen Sie zuerst den Mauszeiger Punkt von rechts)

2. In IE11 erstellt setSize (JS-Zeile 86) keine kleinere Ansichtsbox. Diese Demo zeigt zum Beispiel einen ausgeschnittenen Tooltip in Chrome und einen normalen Tooltip in IE11. http://jsfiddle.net/Lguddypf/

3. Wenn Sie in einer Tabelle anzeigen und scrollen müssen, um ein Diagramm zu sehen, ist die Tooltip-Position falsch: http://jsfiddle.net/Lguddypf/1/ (scrollen Sie die Seite zum Diagramm und bewegen Sie den Mauszeiger über einen Punkt, um zu sehen, dass die Tooltip-Position ist nach links verschoben.

Bitte öffnen Sie http://jsfiddle.net/1jp9e4rw/3/show/ auf dem iPad oder auf Chrome . Die unter dem Datenpunkt erscheinenden Anker für Tooltips werden nicht angezeigt:

Dies ist ein Problem mit der Tooltip-Outside-Box-Studie. Bei Standardimplementierung sind die Tooltips in Ordnung.

Problemumgehung für das obige Problem: http://jsfiddle.net/1jp9e4rw/9/

@pawelfus Wir haben tatsächlich eine ähnliche Problemumgehung (H.wrap()) in unserem Code versucht, aber es stellt sich heraus, dass die Problemumgehung das Problem nie perfekt löst, zum Beispiel könnte es in unserem Fall zu Problemen mit der Leistung und der Zugänglichkeit kommen , und selbst im Safari-Browser wird die QuickInfo-Position nicht genauso berechnet wie im Chrome-Browser. Anstatt zu versuchen, den Fehler mit dem Wrap auf der Verbraucherseite zu beheben, wäre es daher für highcharts sehr nett, dieses Problem im nativen Code zu beheben.

Wie ich sehe, wurde dieser Fehler vor mehr als einem Jahr gemeldet. Gibt es einen Zeitplan oder Plan, um diesen Fehler zu beheben?

Ich hätte auch gerne eine native Lösung für diesen Fehler.
Das Kopieren des jQuery-Skripts scheint nicht richtig zu funktionieren, einige Fälle machen es noch schlimmer.

+1 auch für native Fixes, anstatt sich auf eine Plugin-basierte Lösung zu verlassen. Wir führen dieses Problem auch in unserer Anwendung aus.

Hier ist die von Paweł vorgeschlagene Problemumgehung, jedoch ohne jQuery (und es werden dieselben Berechnungen zum Abrufen von Fenster- und Dokumentgrößen verwendet) - http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

Keine sehr gute Lösung :(

Hallo @MiroLiska
Anhand des Bildlaufleistenstils und des JSFiddle-Logofehlers zu raten - es ist IE11.
In diesem Browser sieht Pawełs Demo genauso aus - ich habe nur die jQuery-Abhängigkeit entfernt, nichts wurde im Code / in der Logik verbessert.
Übrigens: Es wird durch Scrollen verursacht

Wie wäre es mit diesem? http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
Die Animation ist deaktiviert, um das Springen der Bildlaufleiste zu vermeiden, aber Sie können die Animation der QuickInfo umbrechen, um sicherzustellen, dass sie nur über dem verfügbaren Platz animiert oder keine Bildlaufleistenaktion auslöst.

@KacperMadej vielen Dank dafür! Wir stoßen in unserer App auf ein ähnliches Problem, bei dem wir QuickInfos benötigen, die sich mit anderen DOM-Elementen überschneiden. Ihre neue Lösung ist viel besser. Ein kleiner Kritikpunkt ist jedoch, dass es bei Liniendiagrammen mit mehreren Reihen, wenn Sie den Mauszeiger über den Tooltip bewegen, um zu einer anderen Reihe zu gelangen, zu einer leichten Verzögerung kommt, bei der nichts passiert und die Erfahrung nicht großartig ist.

Ich denke, das Problem hier ist, dass das Ereignis mouseOver nicht ausgelöst wird, wenn es über einem Tooltip schwebt. Aber das ist nur eine Vermutung

Ein weiterer Kommentar ist - wir müssen dies mit useHTML formatieren und stylen. Wenn Sie dieses Plugin verwenden, können Sie meines Wissens nach useHTML nicht verwenden und keine benutzerdefinierte Formatierung anwenden, ist das richtig?

Hallo @jackyliang

Es gab vor langer Zeit einen Fehler mit mouseOver und schwebendem Tooltip (um Highcharts v4.0 herum) - dies sollte kein Problem sein, da wir kd-tree zum Suchen der nächstgelegenen Punkte verwenden. Vielleicht ist es ein Rückfall? Könnten Sie das Problem in jsFiddle neu erstellen und teilen? Danke!

In Bezug auf useHTML - ja, das ist eine Einschränkung.

Ich denke, was hier wirklich benötigt wird, ist ein eigenständiger Tooltip, der überhaupt nichts mit dem Diagramm zu tun hat. Zum Beispiel können wir einfach <div> verwenden, das bei Mouseover aktualisiert und bei Mouseout ausgeblendet wird, Demo: http://jsfiddle.net/BlackLabel/xctq42n8/1/ - jetzt können wir alles in den Tooltip schreiben, Das einzige, was verbessert werden muss, ist die Positionierung (Demo verwendet nur die Position des Punktes in Bezug auf das Diagramm, es fehlt die Diagrammposition im Dokument).

@pawelfus Hallo Pawel. Wir sind gerade auf 6.1 (gerade überprüft). Das Fehlen von useHTML ist ein großes Problem, selbst wenn wir zulassen könnten, dass andere DOM-Elemente überlaufen. Unser Team ist zu etwa 95 % damit fertig, unsere alten d3-Diagramme auf Highcharts zu migrieren (was wohlgemerkt eine angenehme Erfahrung war :D), aber traditionell überfluten unsere Tooltips andere Dom-Elemente, da sich jedes Diagramm in seinem eigenen Element befindet. Mit Highcharts sieht es im Moment so aus:

Wie Sie sehen können, hat es ein benutzerdefiniertes Design mit useHTML , das zu 100 % mit unseren alten Tooltips übereinstimmt.

Besteht die Möglichkeit, dass es eine native Lösung von Highcharts gibt, um dieses Überlaufverhalten zu unterstützen, ohne viel benutzerdefinierten Code schreiben zu müssen?

Hallo @jackyliang ,
Derzeit ist die Lösung nur als Problemumgehung verfügbar.

@pawelfus Hallo Pawel, ich würde auch gerne wissen, wie die Chancen stehen, dass wir hier eine native Lösung bekommen?
Wir haben uns für Highcharts entschieden, weil wir keine Problemumgehungen für solche Dinge implementieren wollten, und es scheint, dass viele Leute auf dieses Problem stoßen.
Da alle hier erwähnten Problemumgehungen einige Nachteile zu haben scheinen, scheint es für mich der richtige Schritt zu sein, eine saubere native Lösung dafür zu bekommen.

@sebastianbochan Deshalb wollen wir wissen, wie die Chancen stehen, dass wir eine native Lösung bekommen. Ich denke, für eine so großartige Bibliothek ist es inakzeptabel, einen so großen Nachteil zu haben.

@jackyliang @robinv Danke für die netten Worte! :)

@jackyliang @robinv – Angesichts der Popularität des Problems müssen wir dieses Problem lösen. Ich kann im Moment keine voraussichtliche Ankunftszeit festlegen.

Interner Hinweis:
Die Lösung könnte darin bestehen, die Tooltip-Klasse von der Chart-Klasse zu trennen und in einem unabhängigen Element (Hauptteil?) zu rendern. Das Problem hier kann das Entkoppeln von Tooltip- und Chart/Pointer-Klassen sein (es ist schwierig, wie ich es in der Advanced-Stock-Demo versucht habe) + wir können den Export von Tooltip in Bilder unterbrechen (über tooltip.refresh() ). Dennoch wäre es gut, dies für v7 zu implementieren: Wir könnten die Tooltip-Instanz für Standard-Tools-Schaltflächen/Menüelemente initiieren und nach Belieben verwenden. @TorsteinHonsi

Ich bin sehr dafür, was @robinv gesagt hat, weil dies auch einer der Hauptgründe ist, warum wir zu Highcharts gewechselt sind – wir wollten vermeiden, zu viel benutzerdefinierten Code zu schreiben. Unsere alten d3-Diagramme hatten viele benutzerdefinierte Erweiterungen/Verbesserungen und es wurde zu einem Chaos und Albtraum, nach einer Weile Änderungen vorzunehmen. Ich sage nicht, dass wir HC nicht an unsere Vorlieben anpassen wollen (Anpassung != Erweiterungen), hauptsächlich spreche ich speziell über Erweiterungen; Dinge tun, die HC standardmäßig noch nicht unterstützt.

Unser Plan ist es, unsere HC-Integration innerhalb von 2-3 Wochen für Kunden bereitzustellen, und wir wissen, dass sich Kunden beschweren werden, wenn QuickInfos nicht über anderen Dom-Elementen angezeigt werden. Wenn das Minimum, das wir bekommen, eine ETA ist, wann dies möglich ist, würde mich das vorerst zufriedenstellen, da wir dann feststellen können, ob wir versuchen, eine benutzerdefinierte Lösung (vorerst) zu schreiben, oder auf eine native Lösung von Highcharts warten.

@sebastianbochan Ich wollte darauf hinweisen, dass die Problemumgehung keine wirkliche Lösung ist, da der Positionierungsaspekt etwas wackelig ist

Ich würde mich sehr über eine ETA für eine native Implementierung oder ein Plugin freuen, das das Verhalten (ohne die Positionierungs-/Schwebebewegungen und die Verwendung von benutzerdefiniertem HTML) des aktuellen Tooltip mit DOM-Überlappung emuliert

Danke @pawelfus und @jackyliang.

Pawel, wie Jacky erwähnte, werden wir unseren Kunden in den nächsten 2-3 Wochen Highcharts anbieten, und dies ist einer der Haupthindernisse für unsere Implementierung. Da dies ein Fehler und kein Feature ist, können wir planen, dass dies in den nächsten 2-3 Wochen behoben wird?

Hallo @pawelfus , ich wollte dem nachgehen, um zu sehen, ob es mehr Klarheit darüber gibt/wann wir damit rechnen können, es zu wissen? Dies ist für unseren Planungsprozess im Moment von entscheidender Bedeutung, daher warten wir auf weitere Informationen. Danke!

Hallo @wynnandrewj , wir werden diesen Thread aktualisieren, sobald die ETA entschieden ist. Wir haben Pläne, v6.1.1 in den nächsten 2-3 Wochen zu veröffentlichen, aber ich kann nicht versprechen, dass dieses Problem behoben wird.

Hallo @pawelfus , ich wollte mich nur mit Ihnen und Ihrem Team bezüglich dieses Problems in Verbindung setzen. Wir stehen kurz vor der Einführung von Highcharts für Kunden (denken Sie an maximal 2-3 Wochen für die erste Gruppe von Kunden), und dies ist definitiv ein Blocker. Ich verstehe vollkommen, dass es schwierig ist, ein genaues Datum anzugeben, also werde ich nicht danach fragen. Aber Informationen darüber, ob dies in Angriff genommen wird, und vielleicht einen ungefähren Zeitplan, wären willkommen.

Grundsätzlich wird alles, was wir intern verstehen und mit Kunden kommunizieren können, großartig sein.

Danke!

Danke für deine Geduld @jackyliang , ich werde heute an diesem Code arbeiten und versuchen, einen Überblick über die verbleibenden Probleme zu bekommen.

Wir haben jetzt einen Kandidaten, den Sie unter http://jsfiddle.net/highcharts/fqx10th9/ testen können.

Ich glaube, dass die oben genannten Probleme behoben sind, nämlich useHTML , Blinken beim Bewegen des Cursors nach oben und Bildlaufleisten, die auf schmalen Seiten erscheinen.

Bitte testen Sie diesen Kandidaten. Wenn dies erfolgreich ist, werden wir es in die Veröffentlichung dieser Woche, Highcharts v6.1.1, integrieren.

@TorsteinHonsi vielen Dank! Ich kann es kaum erwarten, damit zu spielen.

@TorsteinHonsi
Ich habe es auch getestet, funktioniert in allen Szenarien.

Das funktionierte super perfekt für uns und das Hinzufügen dauerte nur etwa 30 Minuten. Vielen Dank für die schnelle und perfekte Umsetzung!

@TorsteinHonsi deine Geige funktioniert nicht mehr, weil https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.js nicht existiert. Ich vermute, dass der Zweig gelöscht wurde

@BernardoFBBraga

Wenn dies erfolgreich ist, werden wir es in die Veröffentlichung dieser Woche, Highcharts v6.1.1, integrieren.

und das war es, also haben wir das gemacht. Sie können Highcharts v6.1.1+ verwenden, um die Funktion zu nutzen
API-Referenz: https://api.highcharts.com/highstock/tooltip.outside
Demo: http://jsfiddle.net/BlackLabel/c70h1akL/1/