Ich versuche, einen mehrzeiligen Tooltip hinzuzufügen und habe einige Probleme, hauptsächlich mit der Art und Weise, wie Internet Explorer sie behandelt. Ich kann tatsächlich meinen HTML-Code scheinbar korrekt rendern lassen, aber der IE ignoriert Zeilenumbrüche im Tooltip und fügt alles in dieselbe Zeile ein. Hier sind einige Schnipsel, die ich ausprobiert habe (nicht genauer Code, meine Dev-Station befindet sich in einem geschlossenen Netzwerk, also ignoriere bitte fehlende nicht relevante Informationen wie Position, etc.)
%Vor%Dies scheint fast die beste Lösung zu sein und lässt den HTML-Code wie folgt aussehen:
%Vor%Firefox behandelt das gut als zwei Zeilen, aber IE ignoriert den Zeilenumbruch und setzt sie in die gleiche Zeile. Ich habe viele Variationen ausprobiert. Wenn ich das title-Attribut des rect-Elements verwende, macht FF es gut, IE ignoriert es vollständig und zeigt keinen Tooltip an. Ich ging sogar so weit, das Titelelement unter rect zu zwingen, tspans und ein br wie dieses zu haben (den letzten Anhängentitel oben entfernend)
%Vor%was macht, was ich für richtig halte HTML
%Vor%Auch hier ignoriert IE das br vollständig, auch wenn ich Zeile 2 in den br einfügen (zwischen dem br open und close-Tag) IE ignoriere es trotzdem. Gibt es dafür keine einfache Lösung?
Hier ist eine IE11-freundliche Lösung:
Es gibt zwei Feinheiten:
<tspan> -Elemente, daher sollten sie nicht eingerückt werden; <tspan> -Elemente mit display:block mit doppeltem Zeilenabstand (ich konnte keinen CSS-Trick finden, um dies zu vermeiden), sodass der Stil auf jedes andere -Element angewendet wird. Diese Version wird als vier Zeilen in Chrome 41, Safari 8, Firefox 37 (OSX Yosemite) und IE11 (Windows 7) gerendert. Leider rendert es immer noch als eine einzige Zeile in IE9-10. Wenn Sie hier eine mehrzeilige Anzeige benötigen, würde ich Ihr eigenes <title> Rendering basierend auf Mausereignissen vorschlagen.
Beachten Sie, dass Textinhaltselemente die display -Eigenschaft Die Darstellung der Tooltips erfolgt vollständig im Browser, daher wird diese Technik in Zukunft möglicherweise nicht funktionieren.
... 'desc' und 'title' Elemente werden nicht als Teil der Grafik dargestellt. Benutzeragenten können jedoch beispielsweise das Element 'title' als Tooltip anzeigen, wenn sich das Zeigegerät über bestimmte Elemente bewegt.
(Hervorhebung meins)
Quelle: SVG-Spezifikation, desc und title Elemente .
Für IE10 - es funktioniert mit HTML-Objekten innerhalb der SVG (ein wenig Overkill vielleicht). Scheint auch in allen anderen Browsern zu funktionieren (FF scheint Probleme mit BR-Tags zu haben, und IE wird eine zusätzliche Zeile einfügen, wenn 2 DIV-Tags verwendet werden, daher ist die Verwendung von zwei foreignObjects wahrscheinlich die sicherste Wette).
PS: Ich weiß, dass dieser Beitrag ziemlich alt ist, aber vielleicht braucht noch jemand das (ich brauchte es für SharePoint 2013-Seiten, die leider wegen eines Kompatibilitäts-Meta-Tags im IE10-Modus laufen).
Tags und Links javascript html svg d3.js