How to show multiple tooltip in xrange highcarts? - highcharts

Question

I'm trying to show some tooltip on a particular time on the xrange Highcharts on chart render , but there is no existing feature for that, is there any possibilities to show a tooltip like below
From this example I found that annotation can be used to show some message, I tried to utilize this.
function annotateChart({
text,
value
}) {
const annons = this.annons;
const label = this.renderer.label(text, 0, 0).attr({
stroke: 'red',
'stroke-width': 2,
align: 'center',
zIndex: 99,
class: 'newText'
}).add();
annons.push({
label,
value
});
}
function redrawAnnons() {
const xAxis = this.xAxis[0];
const yAxis = this.yAxis[0];
this.annons.forEach(ann => {
ann.label.animate({
x: xAxis.toPixels(ann.value),
y: yAxis.toPixels(-2.0)
});
});
}
Highcharts.chart('container', {
chart: {
type: 'xrange',
marginTop: '55',
events: {
load: function() {
this.annons = [];
[{
text: ['min', 'time', 'data', 'bluetooth'],
value: Date.UTC(2014, 11, 2)
}, {
text: 'max',
value: Date.UTC(2014, 11, 21, 5)
}].forEach(obj => {
annotateChart.call(this, obj);
});
redrawAnnons.call(this)
},
redraw: redrawAnnons
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
minPadding: 0,
opposite: true
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true,
lineColor: '#2c2d39',
lineWidth: 1
},
series: [{
name: ' ',
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: false
}
}]
});
#container {
min-width: 300px;
max-width: 800px;
height: 190px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
I'm not sure whether this is the correct approach, if there is any other way to achieve this, also the tooltip is shown on the chart top margin
marginTop: '55'
Tooltip With more that 2 data is affecting the highchart responsiveness.