How to make highcharts tooltip show outside of the pie graph?

Question

I'm trying to add a tooltip with images to a donut pie chart. Is there a way that I can position the tooltip outside of the pie slice?

http://jsfiddle.net/jlai403/6eenxom2/4/

$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        useHTML: true,
        text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>',
        verticalAlign: 'middle',
    },

    tooltip: {
        useHTML: true,
        pointFormat: "<img src='{point.customValue}' width='50'/>"
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                useHTML: false,
                enabled: false,
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Some Pie Chart',
        data: [
            {name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'},
            {name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'},
            {name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'}
        ],
        size: '60%',
        innerSize: '50%',
        startAngle: 0,
        endAngle: 260
    }]
});

Answer 1

Am sorry I dont have the reputation to comment so I am adding the updated fiddle here. Do you mean something like this?

http://jsfiddle.net/6eenxom2/6/

Updated js

$(function () {
$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        useHTML: true,
        text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>',
        verticalAlign: 'middle',
    },

    tooltip: {
        useHTML: true,
        //pointFormat: "<img src='{point.customValue}' width='50'/>",
        formatter:function(){
        $('#tooltip').html(this.y + '<img src=' + this.point.customValue + '/>');
}
},
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                useHTML: false,
                enabled: false,
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Some Pie Chart',
        data: [
            {name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'},
            {name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'},
            {name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'}
        ],
        size: '60%',
        innerSize: '50%',
        startAngle: 0,
        endAngle: 260
    }]
});});

Using formatter function to display the tooltip information outside the pie slice.