Try the fiddle now. I changed it to load the JS from http://www.highcharts.com/js/highcharts.js.

I have also tried all the jsfiddle links , but they only work in IE and not in FF and Chrome

I have tried to use this option...it works fine in IE but displays the original tooltip in chrome and firefox with nbsp; as content. I am stuck on this...any help would be great ! thanks

tooltip: {
useHtml:true,
formatter: function() {
var html="<div class='tooltipChrome' id='chartToolTip' style='width:140px;text-align:center;'></div>";
return html;
}
}

Thanks, we have some reorganizing to do in the code, then we'll make the border follow the actual bounding box of the tooltip.

Does anyone have a tip on how can I center the text in it? thanks

Agreed, this is a great improvement. To follow Macklin's comment -- here's an example of what I might try to do: http://jsfiddle.net/3gzVz/4/

Great start! Thank you! It looks like you use the text to determine the size of the bounding box. Instead wrap everything in a div and use those dimensions to create the bounding box? you'll see I could kind of hack a correct bounding box by adding periods to my text to account for an image. http://jsfiddle.net/3gzVz/

Thanks Torstein! I'm really happy about this. Looking forward to using the feature in 2.1.7.

Instead of translating the tooltipFormatter's code to SVG, could HC inject the HTML into a div that is dynamically positioned from mouse events? It's possible to create this customization, but it would be tidier to have a built-in option.

I agree completely and would like to lay out a custom looking tooltip, with a pointer arrow.

Would be great to be able to load the tooltip info with Ajax and then fully decide how it should be formatted, including links that look like links.