tooltip formatter as slot when `tooltip.useHTML == true`

[MathieuDerelle]

would be cool to be able to use slots to construct tooltip when using tooltip.useHTML == true with the parameters of https://api.highcharts.com/class-reference/Highcharts#.TooltipFormatterCallbackFunction passed like so

<highcharts :options="chartOptions" :callback="someFunction">
  <template v-slot:tooltip="{ instance, tooltip }">
    <table>
                <thead>
                  <tr>
                    <th colspan="3"><b>${instance.x}</b> :</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="data in instance.points">
                    <td>
                      <span style="color:${data.point.color}">●</span>
                      ${data.series.name}
                    </td>
                    <td class="text-end px-2">
                      <b>${data.point.y}</b>
                    </td>
                    <td class="text-end">
                      <b>${data.percentage.toFixed(2)} %</b>
                    </td>
                  </tr>
	       </tbody>
    </table>
  </template>
</highcharts>

and be able to encapsulate it in a component :

<highcharts :options="chartOptions" :callback="someFunction">
	<template v-slot:tooltip="{ instance, tooltip }">
		<HighchartTooltip :instance="instance" :tooltip="tooltip" />
	</template>
</highcharts>

writting html in strings is annoying :

          formatter() {
            const body = this.points
              .concat()
              .reverse()
              .filter((data) => data.series.visible)
              .map(
                (data) => `
                  <tr>
                    <td>
                      <span style="color:${data.point.color}">●</span>
                      ${data.series.name}
                    </td>
                    <td class="text-end px-2">
                      <b>${data.point.y}</b>
                    </td>
                    <td class="text-end">
                      <b>${data.percentage.toFixed(2)} %</b>
                    </td>
                  </tr>
                `
              )
              .join('')
            return `
              <table>
                <thead>
                  <tr>
                    <th colspan="3"><b>${this.x}</b> :</th>
                  </tr>
                </thead>
                <tbody>${body}</tbody>
              </table>
            `
          }

[Denyllon]

Hello @MathieuDerelle ,

Thank you for reporting your suggestion! We will consider to add it in the next major release, but I can't tell you the exact date of when it will be done. Meanwhile, added the enhancement label in order to know how much work do we have to do with the new version of the wrapper.

Kind regards!