Highcharts tooltip overflow is hidden

Question

My problem is that when the chart drawing area of is smaller than a highchart tooltip, a part of the tooltip is hidden where it overflows the chart drawing area.

I want the tooltip to be visible all the time, no matter the size of the chart drawing area.

No CSS setting helped and no higher z-index setting helped either.

Here is my example... http://twitpic.com/9omgg5

Any help will be mostly apreciated.

Thank you.

Answer 1

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

Answer 2

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

Answer 3

OK, sorry for the delay. I could not find a better solution, but I found a workaround.

Here is what I did and what I suggest everyone to try:

Set the tooltip.useHTML property to true (now you can have more control with html and CSS). Like this:

tooltip: {
    useHTML: true    
}

Unset all the default tooltip peoperties that may have something to do with the default tooltip functionalities. Here is what I did...

tooltip: {                        
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

Make sure that your chart container's css property "overflow" is set to visible. Also make sure that all DOM elements (div, section, etc....) that hold your chart container also have the css "overflow" property set to "visible". In this way you will make sure that your tooltip will be visibile at all times as it overflows his parent and his other "ancestors" (Is this a correct term? :)).

Customize your tooltip formatter as you wish, using standard CSS styling. Here is what I did:

tooltip.formatter: {
    < div class ="tooltipContainer"> Tooltip content here < /div >
}

---

This is how it all looks like:

tooltip: {                        
    tooltip.formatter: {
        < div class ="tooltipContainer"> Tooltip content here < /div >
    },
    useHTML: true,
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

If you have a better solution, please post.

Answer 4

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.

Answer 5

This css helped me:

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

Answer 6

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*/
}