I'm building a highcharts highmap using the documentation here: http://api.highcharts.com/highmaps/tooltip.style

And I have successfully style my tooltip the way I want it to look in terms of color and content..

Here is what I current have:

Here is what I need (the little arrow or carrot on the tooltip)

Usually I would create this by using HTML :after or :before and relative positioning but I'm stumped on how to do this in highcharts. I know I could set useHtml:true and then apply css to the class rendering the tooltip but I feel like there must be a way to automatically have the tooltips do this through a prop in the highcharts?

Here is the code I currently have for the highchart:

let config = {
  tooltip: {
      backgroundColor: '#ff9600',
      borderWidth: 1,
      borderColor: '#ff9600',
      borderRadius: 2,
      formatter: function () {
          return '<b>' +
          '<span style="'+ tooltipStyle + '">' + this.point.name + ': $ 620 USD</span><br>' +
          '<span style="'+ tooltipStyle + '">' + this.point.value + ' Transactions</span>';
      }
  },

  series:[{
    allAreas: true,
    data: data,
    mapData: mapsPathData,
    joinBy: [countryCode],
    dataLabels: {
        enabled: false,
        format: '{point.name}'
    }
  }]

};