Show Highcharts tooltip outside SVG container - highcharts

Question

Is there a way to how the Highcharts tooltip outside the SVG container and always above the mouse?
Right now tooltips are sometimes shown over the data, because it doesn't fit within the container above the data point.

Answer 1

Great! I found one example which seems to work in jsfiddle: http://jsfiddle.net/vbddw4r0
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
min: 0
},
tooltip: {
enabled: true,
backgroundColor: "rgba(255,255,255,0)",
borderWidth: 0,
shadow: false,
useHTML: true,
formatter: function () {
return '<div class="tooltip"><b>' + this.series.name + '</b>' +
'<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '<br/>' + Highcharts.dateFormat('%b %e, %H:%M', this.x) + ': ' + this.y + '</div>';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
type: 'spline',
id: 'Total',
name: 'Total',
color: '#2788F4',
data: [{
id: 'Total-1361059200000',
x: 1361059200000,
y: 35.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361088000000',
x: 1361088000000,
y: 254.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361116800000',
x: 1361116800000,
y: 96.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361145600000',
x: 1361145600000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361174400000',
x: 1361174400000,
y: 40.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361203200000',
x: 1361203200000,
y: 117.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361232000000',
x: 1361232000000,
y: 10.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361260800000',
x: 1361260800000,
y: 206.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361289600000',
x: 1361289600000,
y: 351.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361318400000',
x: 1361318400000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361347200000',
x: 1361347200000,
y: 186.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361376000000',
x: 1361376000000,
y: 59.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361404800000',
x: 1361404800000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361433600000',
x: 1361433600000,
y: 211.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361462400000',
x: 1361462400000,
y: 104.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361491200000',
x: 1361491200000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361520000000',
x: 1361520000000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361548800000',
x: 1361548800000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361577600000',
x: 1361577600000,
y: 24.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361606400000',
x: 1361606400000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361635200000',
x: 1361635200000,
y: 108.0,
marker: {
enabled: true
}
}, {
id: 'Total-1361664000000',
x: 1361664000000,
y: 0.0,
marker: {
enabled: false
}
}, {
id: 'Total-1361692800000',
x: 1361692800000,
y: 0.0,
marker: {
enabled: false
}
}]
}, {
type: 'spline',
name: 'Transparent',
color: 'rgba(255, 255, 255, 0.1)',
data: [{
x: 1361059200000,
y: 0.0,
marker: {
symbol: "square",
radius: 3,
fillColor: "#f2a8a8",
states: {
hover: {
radius: 3,
fillColor: "#f2a8a8"
}
}
}
}, {
x: 1361088000000,
y: 0.0,
marker: {
symbol: "square",
radius: 8,
fillColor: "#f2a8a8",
states: {
hover: {
radius: 8,
fillColor: "#f2a8a8"
}
}
}
}, {
x: 1361116800000,
y: 0.0,
marker: {
symbol: "square",
radius: 6,
fillColor: "#f2a8a8",
states: {
hover: {
radius: 6,
fillColor: "#f2a8a8"
}
}
}
}]
}]
});
});
});