[Solved]-Highcharts tooltip overflow is hidden-Highcharts

none of the solutions worked for me. when the tooltip was bigger than the chart it simply didn't show.

eventually we realized that highcharts actually hides the tooltip in the class highcharts-tooltip-box, so the solution is to set it to inherit which the class default:

 .highcharts-tooltip-box {
    visibility: inherit !important;
  }

after that overflow still need to be set to visible:

  .highcharts-container,
  svg:not(:root),
  .chart-container {
    overflow: visible !important;
  }

and make sure to set the z-index higher in the container if you're having any problems.

i would just like to add an example and prove that .highcharts-tooltip-box doesn't have to be set for overflow to work.

/* .highcharts-tooltip-box {
  visibility: inherit !important;
} */

.highcharts-container,
svg:not(:root),
.chart-container {
  overflow: visible !important;
}

demo: https://jsfiddle.net/blacklabel/3fubr1av/

i know the question is old but i just wanted to share my solution, it's based on the other two answers but i think that you obtain a better-looking result with this code:

tooltip options:

tooltip: {
   usehtml: true,
   shared: false,
   borderradius: 0,
   borderwidth: 0,
   shadow: false,
   enabled: true,
   backgroundcolor: 'none',
   formatter: function() {
      return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
   }
}

css:

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

.highcharts-tooltip span>span {
    background-color:rgba(255,255,255,0.85);
    border:1px solid;
    padding: 2px 10px;
    border-radius: 2px;
}

#divcontainerid .highcharts-container{
    z-index: 10 !important; /*if you have problems with the label hiding behind some other div or chart play with z-index*/
}

adding simply this css worked in my case (minicharts in table cells):

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

the tooltip option usehtml was not required:

tooltip: {
    usehtml: false
}

works on both ie8/9 & ff33.1 (ff was causing trouble).

i recently got the same problem, but with bootstrap container ! (bs3)

none of those solutions worked but i found by my own.

its due to bootstrap _normalizer properties

svg:not(:root) {
  overflow: hidden !important;
}

so add both :

.highcharts-container, svg:not(:root) {
    overflow: visible !important;
}

a modern approach (highcharts 6.1.1 and newer) is to simply use tooltip.outside (api):

whether to allow the tooltip to render outside the chart's svg element box. by default (false), the tooltip is rendered within the chart's svg element, which results in the tooltip being aligned inside the chart area. for small charts, this may result in clipping or overlapping. when true, a separate svg element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.

quite simply this means setting this one value to true, for example:

highcharts.chart('container', {
    // your options...
    tooltip: {
        outside: true
    }
});

see this jsfiddle demonstration of how setting this value to true fixes space/clipping issues.

this css helped me:

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