PSU
PSU

Reputation: 187

Adding images to tooltips in Highmaps

How can I a display an image (small icon) in a tooltip within Highmaps? I know this question has been asked before - here - but damned if I can get it to work. I even wonder if it is possible, because as far as I can see in their API docs, the Highmaps support for HTML is limited, as eg here and does not include the img tag.

I have create a jsfiddle here with some sample icons. I'd be grateful if someone could demo how to add these to the tooltips (one per tooltip, of course)

$('#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"
                    }
                ]   
            }
        ]
     });

Upvotes: 0

Views: 221

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You need to enable the useHTML parameter and link a displayed picture with a point, for example:

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">'
    }
}

Live demo: https://jsfiddle.net/BlackLabel/9bujq56y/

API Reference: https://api.highcharts.com/highmaps/tooltip.useHTML

Upvotes: 1

Related Questions