Border Styles for Highchart tooltip

Question

I am trying to edit a frame for my tooltip in highcharts.

The problem I am facing is that I want to show only the lower bound.

For example, you can do something like this:

tooltip: {borderWidth: 10} // but the problem is creating a frame around the entire tooltip

doing something like this would be nice, but not possible:

hint: {borderWidth: 0, 0, 0, 10}

I also tried this:

tooltip: {style: {border-bottom: 10}}

But this does not seem to work. I'm starting to wonder if this is possible.

OR

Does anyone know a good site that shows what exactly is allowed in the style attribute for a tooltip. It seems like there is a certain way to do styles in this attribute, but http://api.highcharts.com/highcharts#tooltip really does not give you enough information.

Answer 1

You simply use the HTML tooltip in Highcharts by setting useHTML: true ; see example: http://jsfiddle.net/xq28t/

In JS:

 tooltip: { useHTML: true, borderWidth: 0, style: { padding: 0 } }, 

In CSS:

 .highcharts-tooltip>span { padding: 10px; border-bottom: 1px solid black; }