How to position the customed tootip of HighCharts? - highcharts

Question

I try to modify the default styles of tooltip. I want the bottom of the tooptip with a sharp corner, like callout box. I found a example that supports pointers on the right and left side. I modified some code, achieve the pointer at bottom, but the pointer can't direct at selected point.Code link at jsFiddle: http://jsfiddle.net/yuezheng/AxqKY/90/. How to position the box at the top of the selected point?
(function (Highcharts) {
Highcharts.Renderer.prototype.symbols.callout = function (x, y, w, h, options) {
var distance = 15,
arrowLength = 10,
halfDistance = 7.5,
r = options ? options.r : 5,
anchorX = (options && options.anchorX) || x,
anchorY = (options && options.anchorY) || y,
top = ['M', x + r, y, 'L', x + w - r, y],
topRight = ['C', x + w, y, x + w, y, x + w, y + r],
right = ['L', x + w, y + h - r],
rightBottom = ['C', x + w, y + h, x + w, y + h, x + w - r, y + h],
//bottom = ['L', x + r, y + h],
bottomLeft = ['C', x, y + h, x, y + h, x, y + h - r],
left = ['L', x, y + r],
leftTop = ['C', x, y, x, y, x + r, y],
bottom = ['L', x + w/2 + arrowLength, y + h,
x + w/2, y + h + arrowLength,
x + w/2 - arrowLength, y + h,
x, y + h];
/*
if (anchorX > w) {
right = [
'L', x + w, anchorY - halfDistance,
x + w + arrowLength, anchorY,
x + w, anchorY + halfDistance,
x + w, y + h - r
];
} else if (anchorX < 0) {
left = [
'L', x, anchorY + halfDistance,
x - arrowLength, anchorY,
x, anchorY - halfDistance,
x, y + r
];
}
*/
return top
.concat(topRight)
.concat(right)
.concat(rightBottom)
.concat(bottom)
.concat(bottomLeft)
.concat(left)
.concat(leftTop);
};
}(Highcharts));
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
shape: 'callout',
borderColor: '#AAA',
borderWidth: 1,
shadow: false,
borderRadius: 5
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});

Answer 1

Maybe better will be disable all hgihcharts options, set useHTML and add all elements as HTMl elemtns with CSS styles?