1

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

Issue

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).

Normal

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

2

4 Answers 4

4

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.

0
2

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.

2
  • Scrapped through google for a whole day and I finally found my solution!
    – Envil
    May 12, 2018 at 9:47
  • Please accept the answer.. Scrapped through google since yesterday
    – Pushan
    Jul 3, 2018 at 6:50
0

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>";
                }
        },

1
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.