Show Highcharts tooltip outside SVG container

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"
                            }
                        }
                    }
                }]
            }]
        });
    });

});