Добавление изображений в подсказки в Highmaps

Question

Как я могу отобразить изображение (маленький значок) во всплывающей подсказке в Highmaps?Я знаю, что этот вопрос задавался раньше - здесь - но, черт побери, могу ли я заставить его работать.Я даже задаюсь вопросом, возможно ли это, потому что, насколько я вижу в их документации по API, поддержка Highmaps для HTML ограничена, например, здесь и не включает тег img.

Я создал jsfiddle здесь с некоторыми примерами иконок.Буду признателен, если кто-нибудь сможет продемонстрировать, как добавить их к подсказкам (конечно, по одной на каждую подсказку)

$('#container').highcharts('Map', {
        title: {
           "text": "Simple Map"
        },
        series: [
            {
              "name": "Colours",
                "type": "map",
                "tooltip": {
                   "headerFormat": "",
                   "pointFormat": "{point.name}"
                },
                "data": [
                    {
                        "name": "Blue<br>violets",
                        "path": "M0,-994L204,-994L203,-480,0,-477z"
                    },
                    {
                        "name": "Yellow<br>is the colour of...",
                        "path": "M204,-994L455,-994L457,-477,203,-480z"
                    },
                    {
                        "name": "Red<br>sky at night",
                        "path": "M455,-994,697,-991,700,-481,457,-477z"
                    },
                    {
                        "name": "Green<br>grass",
                        "path": "M697,-991,998,-992,1000,-480,700,-481z"
                    }
                ]   
            }
        ]
     });

Answer 1

Вам необходимо включить параметр useHTML и связать отображаемое изображение с точкой, например:

series: [{
    ...,
    "data": [{
            ...,
            tooltipImg: 'left'
        },
        {
            ...,
            tooltipImg: 'right'
        },
        ...
    ]
}],
tooltip: {
    useHTML: true,
    formatter: function() {
        return this.point.name +
        '<br><img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-' +
        this.point.tooltipImg + '-icon.png" width="32" height="32">'
    }
}

Демо: https://jsfiddle.net/BlackLabel/9bujq56y/

Справочник по API: https://api.highcharts.com/highmaps/tooltip.useHTML