HighChart Tooltip word-break issue

Question

I searched a lot but i am not finding any suitable solution to my problem. I am using HighChart plugins to create pie chart as well as bar chart.

My problem is, after hovering on any bar chart or pie chart default tool-tip appears, in that i want to use css property word-break & white-space in that tooltip. Right now the text getting cut if it goes outside of container width.

I tried overwriting the .highcharts-tooltip css but is not working. See in example, hover on blue & black slice you will get to know the issue i am facing.

.highcharts-tooltip {
word-break: break-word !important;    
white-space: normal !important;   

}

Here is JsFiddle

Any help is Appreciated.

Thanks In Advance

Answer 1

To be able to customize your tooltip like this you will have set the tooltip option useHtml to true:

tooltip: {
  useHTML: true
}

From Higcharts documentation:

useHTML: BooleanSince 2.2

Use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables and images in the tooltip.

Then you need to set the CSS attribute to the span element of the .highcharts-tooltip (I also added a fixed width):

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

Working Fiddle

Answer 2

Just enable the useHTML property for the tooltip and you can style your own tooltip (incl. word-break and white-space.

tooltip: {
    useHTML: true,
  formatter: function() {
    return "<div class='tooltip-key'><span>" + this.key + "</span></div>"
  }
},

Check out the fiddle or run the snippet below

$(function() {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares January, 2015 to May, 2015'
        },
        tooltip: {
        	useHTML: true,
          formatter: function() {
          	return "<div class='tooltip-key'><span>" + this.key + "</span></div>"
          }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                showInLegend: false,
                dataLabels: {
                    enabled: false
                },
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer Microsoft Internet Explorer',
                y: 56.33
            }, {
                name: ' Chrome  Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome Chrome',
                y: 24.03,
                sliced: true,
                selected: true
            }, {
                name: 'Firefox',
                y: 10.38
            }, {
                name: 'Safari',
                y: 4.77
            }, {
                name: 'Opera',
                y: 0.91
            }, {
                name: 'Proprietary or Undetectable',
                y: 0.2
            }]
        }]
    });
});

.tooltip-key {
  width: 300px;
  word-break: break-word;
  white-space: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharttable.org/master/jquery.highchartTable-min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Source: http://www.highcharts.com/docs/chart-concepts/tooltip#formatter