Force Highcharts to display tooltip outside of div/container

Question

[Highcharts]

Hello, is there a way to display the tooltip outside the tags? Like to make it "float" outside the container so that it doesn't get cutoff like below.

Thanks in advance.

Here's an example jsFiddle you can use to reproduce the issue. (Try hovering over the boxplot)

http://jsfiddle.net/af3g18mo/ Code

Answer 1

In your fiddle i can figure out the Problem:

If you go up one cascade in your stylesheet you can see that your paths and stuff is within a tag. The tag has the fix height of 65px and no overflow attributes - but one path before there is the overflow:hidden. This is why the highchart tooltips and everything is just cut off.

You can change your height dynamically to for example 40% what doesn't really fix the problem if you have longer contents in your tooltip. but you can give a "overflow:visible;" to your <svg> and overwrite the "overflow:hidden" in your ".highcharts-container" with visible - so all the contents like your tooltips that have more than 65 px height are displayed.

You can see the solution here: be careful changing these things, but in your example i couldn't see any bad reactions to this change. In case you have to give your css the whole path to not change it globally.

http://jsfiddle.net/af3g18mo/2/

So the concrete fixing for your css could be:

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