Highcharts gauge keep tooltip visible and centered

Question

I cannot get the tootlip of my highcharts gauge to appear and stay visible and centered inside the gauge when the screen is resized.

In my fiddle you can see the tooltip appear then after a small amount of time disappear. Also, it does not remain in the center of the gauge when the window is resized.

Any help is appreciated. My JSFIDDLE is here.

    gaugeChartObj = new Highcharts.Chart({
        credits: false,
        chart: {
            renderTo: divID,
            type: 'solidgauge',
            marginTop: 30,
            events: {
                load: function(){
                    var p = this.series[0].points[0];
                    this.tooltip.refresh(p);
                }
            }
        },
        title: {
            text: dataC.title,
            style: {
                fontSize: '16px'
            }
        },
        exporting: {
            enabled: false
        },
        tooltip: {
            borderWidth: 0,
            backgroundColor: 'none',
            useHTML: true,
            shadow: false,
            style: {
                fontSize: '16px'
            },
            formatter: function() {
                return '<div style="width:100%;text-align:center;"><span style="font-size:1.2em;font-weight:bold;">' + this.point.series.name + '</span><br/><span style="font-size:3em;color:' + Highcharts.getOptions().colors[0] + ';font-weight:bold;">' + Highcharts.numberFormat(this.y / 10, 0) + '</span>';
            },
            positioner: function (labelWidth) {
                return {
                    x: 170 - labelWidth / 2,
                    y: 125
                };
            }
        },
        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{
                outerRadius: '106%',
                innerRadius: '94%',
                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
                borderWidth: 0
            }]
        },
        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
        },
        plotOptions: {
            solidgauge: {
                borderWidth: '12px',
                dataLabels: {
                    enabled: false
                },
                linecap: 'round',
                stickyTracking: true
            }
        },
        series: [{
            name: 'Subscriptions',
            borderColor: Highcharts.getOptions().colors[0],
            data: [{
                color: Highcharts.getOptions().colors[0],
                radius: '100%',
                innerRadius: '100%',
                y: dataC.seriesData
            }]
        }],
        lang: {
            noData: "No data to display"
        },
        noData: {
            style: {
                fontWeight: 'bold',
                fontSize: '15px',
                color: '#333333'
            }
        }
    });

Answer 1

You can use dataLabels instead of tooltip to show centered information in your solidgauge chart: http://api.highcharts.com/highcharts/plotOptions.solidgauge.dataLabels

dataLabels: {
      enabled: true,
      y: -40,
      borderWidth: 0,
      backgroundColor: 'none',
      useHTML: true,
      shadow: false,
      style: {
        fontSize: '16px'
      },
      formatter: function() {
        return '<div style="width:100%;text-align:center;"><span style="font-size:1.2em;font-weight:bold;">' + this.point.series.name + '</span><br/><span style="font-size:3em;color:' + Highcharts.getOptions().colors[0] + ';font-weight:bold;">' + Highcharts.numberFormat(this.y / 10, 0) + '</span>';
      }
},

Here you can see an example how it can work: http://jsfiddle.net/ujmxxf03/10/