Display tooltips exact format outside, into another div - highcharts

Question

I want to display my exact tooltips display ( 'LabelName:y.axis' (with legend color)) , into another div (most probably above the chart). And it should be per panehovering (currently having 3 panes). Is this possible?..
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json',
function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
volume2 = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [
[
'week', // unit name
[1] // allowed multiples
],
[
'month',
[1, 2, 3, 4, 6]
]
],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
volume2.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '33%',
lineWidth: 2,
id: '0',
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '33%',
height: '33%',
offset: 0,
lineWidth: 2,
id: '1',
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume 123'
},
top: '66%',
height: '33%',
offset: 0,
lineWidth: 2,
id: '2'
},{
opposite:false,
labels: {
align: 'right',
x: -3
},
title: {
text: 'second AAPL'
},
height: '33%',
offset: 0,
lineWidth: 2,
id: '3'
}],
xAxis: [{
offset: -4,
lineWidth: 2
}],
legend: {
enabled: true
},
tooltip: {
split: true
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
yAxis: 0
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
}, {
type: 'column',
name: 'Volume123',
data: volume,
yAxis: 2,
}, {
type: 'spline',
name: 'second AAPL',
data: ohlc,
yAxis: 3,
}]
});
});
This is my working demo fiddle . This is how my code look like.I want to make the tooltip data to be displayed in other div,so far I have tried, only one data series getting called..
Visual Representation of desired tooltips
I really appreciate any help

Answer 1

Use the below options to position a tooltip in the div above the chart:
tooltip: {
...,
shared: true,
split: false,
shape: 'rect',
outside: true,
positioner: function() {
return {
x: 0,
y: 0
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/akwgf7hm/
API Reference: https://api.highcharts.com/highcharts/tooltip.positioner