According to the docs, the [`tooltip.formatter`][1] is: 

> ... a subset of HTML. Unless [`useHTML`][2] is true, the HTML of the tooltip is parsed and converted to SVG, therefore this isn't a complete HTML renderer. The following tags are supported: `<b>`, `<strong>`, `<i>`, `<em>`, `<br/>`, `<span>`.  
>  Spans can be styled with a `style` attribute, but only text-related CSS that is shared with SVG is handled.

So you should set tooltip like this:



    tooltip: {
      useHTML: true,
      formatter: function () {
        return '<b>' + this.point.name + "</b>: " + this.point.percentage + "%<br/>" + 
               "<img src='" + this.point.img + "'></img>";
      }
    },


### Here's a demo in Stack Snippets





    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Favorite Fruits'
        },
        tooltip: {
          useHTML: true,
          formatter: function () {
            return '<b>' + this.point.name + "</b>: " + this.point.percentage + "%<br/>" + 
                   "<img src='" + this.point.img + "'></img>";
          }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Fruits',
            colorByPoint: true,
            data: [{
                name: 'Apple',
                y: 50,
                img: "https://i.imgur.com/MmK9Xkc.png"
            }, {
                name: 'Banana',
                y: 25,
                img: "https://i.imgur.com/0G6GXWf.png"
            }, {
                name: 'Orange',
                y: 15,
                img: "https://i.imgur.com/Dv4KoD5.png"
            }, {
                name: 'Watermelon',
                y: 10,
                img: "https://i.imgur.com/2LN8PfD.png"
                
            }, ]
        }]
    });



    <link href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.1.2/css/highcharts.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.1.2/highcharts.js"></script>


    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>



[1]: https://api.highcharts.com/highcharts/tooltip.formatter
[2]: https://api.highcharts.com/highcharts/tooltip.useHTML

I am looking for a sample of Javascript code to visualise pictures in a tooltip of a pie chart from Highcharts.

I would like to see different pictures according to the sectors I am navigating on...

Thanks in advance.  