The tooltip is cut off in Highcharts 3.X

Question

The tooltip is cut off when the width of chart is smaller than the tooltip width.

So, I've changed the "overflow" attribute of ".highcharts-container" to "visible" and it was fixed the issue in all browsers except IE (I see ScrollBars in some cases).

The question is "How can I keep ToolTip rendered normally and support IE?"

Answer 1

The problem is that the containing html element is too small, and the tooltip is cut because of the overflow: hidden defined by highcharts.

you can add the following CSS class:

  .highcharts-container {
    overflow: visible !important;
  }

  .highcharts-container svg {
    overflow: visible !important;
  }

you need to use !important to override the style that is configured by highcharts.

Answer 2

By default, highcharts puts tooltip in chart's SVG element box. And if tooltip is bigger than chart, it won't be visible.

In your case, I think you need to allow tooltip to go outside chart's SVG element box.

There is an API option for that: tooltip.outside, by default it's undefined. You can set it to true and your tooltip will render outside chart's SVG Element.

...
// chart options object... just need to update tooltip
{
  ...
  tooltip: {
    outside: true
  },
  ...
}
...

You can read more about it at https://api.highcharts.com/highcharts/tooltip.outside.

Answer 3

Why don't you define the width of your tooltip which is smaller than the width of your chart and wrap the text inside it: http://jsfiddle.net/4qLsw34t/

tooltip: {
            style: {
              width: "100px"
            }
  }

Or you can use the formatter option if using any earlier version of the highcharts: http://jsfiddle.net/4qLsw34t/5/

tooltip: {
        	useHTML: true,
        	formatter: function() {
                    return "<div style='white-space: normal; width: 150px;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>";
                }
        },

Answer 4

Set the z-index of the tooltip to 1000 and the z-index of the HighCharts outer container to a lower number.