Move flags tooltip to upper side - highcharts

Question

I have Highstock chart with flags. Everything is fine but I wanted to change the position of the tooltip of the flags. (Move tooltip of flags to upper side of the flags). And also i want to give link to flags text "Test test", which will open in new tab. Can any one help me? This my full code http://jsfiddle.net/anant_ghate/8byc9/1/
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
tooltip: {
positioner: function(boxWidth, boxHeight, point) {
return {
x: point.plotX + 20,
y: point.plotY + -20
};
},
shared:true,
formatter: function(){
var p = '';
if(this.point) {
p += '<span>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.point.x) +'</span><br/>';
p += '<b>'+ this.point.title + '</b>' // This will add the text on the flags
}
else {
p += '<b>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.x) +'</b><br/>';
$.each(this.points, function(i, series){
p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y;
});
}
return p;
},
},
rangeSelector: {
selected: 1
},
title: {
text: 'USD to EUR exchange rate'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
tooltip: {
yDecimals: 4
}
}, {
type: 'flags',
data: [{
x: Date.UTC(2011, 1, 20),
title: 'Test test'
}, {
x: Date.UTC(2011, 3, 20),
title: 'Test test'
}],
onSeries: 'dataseries',
allowPointSelect : true,
shape: 'squarepin',
y : -40
}]
});

Answer 1

You can tweak the tooltip like in this answer Highcharts tooltip always on right side of cursor
And make the flags clickable with an approach similar to this highcharts clickable labels how to goto anchor

Answer 2

To redirect to a url when clicking a flag you can create a function on the "click-event":
http://jsfiddle.net/8byc9/5/
I don't think it will be easy to create your own positioner only for the flag-tooltip but not for the currencytooltip...