How to create tooltip in highcharts map on click over a country...?

Question

I am trying to achieve something like in this example: JSFiddle chart example. However, I am using a map NOT a line chart. I did the work around, and it is working with the below issues that I need solution for :

When I click on a country, the tooltip gets displayed, BUT once I move the pointer away the content or the text disappears. However, the tooltip's outline remains static. You can see here, the texts moves away with the cursor moving out (which is the tooltip's basic functionality).
Secondly, I have an action to trigger that will take the value and the name of the country, for updating other chart component. Once the action is dispatched and the store updates, the tooltip that is supposed to remain over the country it was clicked, disappears. You can find the config's plotOptions below: where I am triggering action at the end of the click event

this.config.plotOptions = {
  map: {
    allAreas: false,
    nullColor: "#d6d6d6",
  },
  series: {
    cursor: "pointer",
    stickyTracking: false,
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false,
        },
      },
    },
    events: {
      click: function() {
        this.selectedCountry = this.chart.hoverPoint.name;
        this.selectedValue = this.chart.hoverPoint.value;
        console.log(this.chart);
        var x = a.checkCountry.length;
        if (x > 0) {
          a.clone[0].remove();
          a.clone.splice(0, 1);
          a.checkCountry.splice(0, 1);
        }
        var cloneToolTip = this.chart.tooltip.label.element.cloneNode(true);
        this.chart.container.firstChild.appendChild(cloneToolTip);
        a.checkCountry.push(this.selectedCountry);
        a.clone.push(cloneToolTip);
        /*Action goes here*/
      },
    },
  },
};

I tried the net and highcharts Q&A, but didn't find an appropriate solution.

Finally, again what I want to achieve is

A tooltip that is displayed on click over a country on highcharts map, and does not disappear until another country is clicked. Plus, I want to trigger an action on selecting a country, don't know if I am triggering from the right place currently.

Your help is appreciated!

Links to similar problems with charts: [JSFiddle](https://jsfiddle.net/BlackLabel/magropy6/) [JSFiddle](https://jsfiddle.net/aespichan/0je10ur7/3/) — SHAHBAZ, Jun 03 '20 at 16:41
Does this answer your question? [Highcharts - Keep tooltip showing on click](https://stackoverflow.com/questions/11476400/highcharts-keep-tooltip-showing-on-click) — Józef Podlecki, Jun 03 '20 at 16:43
Well, this is not the solution I am looking for. I have found and attached similar solutions, but I need something with maps. And to add, I am having issue triggering action within the click event. — SHAHBAZ, Jun 03 '20 at 18:35

score 1 · Accepted Answer · answered Jun 04 '20 at 09:41

The plugin below should solve both of your problems:

(function(H) {
    H.Tooltip.prototype.hide = function() {};

    H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, point, e) {
        if (e && e.type !== 'mouseover' && e.type !== 'mousemove') {
            this.updatePos = true;
            proceed.call(this, point, e);
        }
    });

    H.wrap(H.Tooltip.prototype, 'updatePosition', function(proceed, pos) {
        if (this.updatePos) {
            this.updatePos = false;
            proceed.call(this, pos);
        }
    });

    H.addEvent(H.Point.prototype, 'click', function(e) {
        e.point.series.chart.tooltip.refresh(e.point, e);
    });
}(Highcharts));

Live demo: https://jsfiddle.net/BlackLabel/3e4cvz2m/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

How to create tooltip in highcharts map on click over a country...?

1 Answers1