Text an highchart tooltip anpassen max width

Question

Ich möchte den Text in meinem Highcharts-Tooltip vertikal anpassen (eine maximale Breite ist definiert, wenn der Text nicht zu dieser maximalen Breite passt, vergrößern Sie die Tooltip-Höhe)

Was für einfache HTML-Zeug funktioniert ...

#my_div 
{ 
    height:auto; 
    max-width:140px; 
    overflow:auto 
} 

nicht für highcharts Tooltips nicht funktioniert, siehe http://jsfiddle.net/perikut/hNCDb/2/

Answer 1

Standard white-spacenowrap gesetzt ist, können Sie es zu normal ändern sollte.

.highcharts-tooltip span { 
    height:auto; 
    width:140px; 
    background-color:green; 
    overflow:auto; 
    white-space:normal !important; // add this line... 
} 

DEMO

Answer 2

Wenn Sie nur das white-space Verhalten OFTHE Tooltip für eine einzelne Karte und/oder separat steuern den Stil für jedes einzelne Diagramm ändern möchten, können Sie den folgenden Ansatz verwenden:

tooltip: { 
    useHTML: true, 
    formatter: function() { 
     return "<div style='width: 400px; white-space:normal;'>" + this.points[0].point.yourDataPointValue + "</div>"; 
    } 
} 

Demo

Beachten Sie, dass Sie/verwenden sollten einen Klassennamen im Vergleich zu einer inl verwenden Wenn Sie den gleichen Stil für mehrere QuickInfos verwenden möchten.

Answer 3

einfach fügen Sie diese zu den Chart-Optionen:

tooltip:{ 
    shared: false, 
    useHTML: true 
} 

Dann folgendes CSS hinzufügen:

.highcharts-tooltip span { 
    height:auto !important; 
    width:140px !important; 
    max-width:140px !important; 
    overflow:auto !important; 
    white-space:normal !important; 
} 

Sie sind gut zu gehen! ;-)