Tooltip is visible on the whilte area as well in lat-lon mappoint Highmaps

Question

I am working with Highmaps and got stuck in an issue of tooltip on the mappoints plotted with lat-lon positions .

Everything is correct , but the tooltip is coming for the point which is closest to the mouse cursor. This leads to show tooltip being enabled even on the white container area of a Map.

This leads to issue when there are multiple lat-lon points on a map .

I tried with Mouse-Over and Mouse-out event on the point , but the result is same , point is detected from mouse being very far .

The issue is also visible on the Highmaps lat-lon demo.

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/

[<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js"></script>

<div id="container"></div>


// Initiate the chart
Highcharts.mapChart('container', {

    chart: {
        map: 'countries/gb/gb-all'
    },

    title: {
        text: 'Highmaps basic lat/lon demo'
    },

    mapNavigation: {
        enabled: true
    },

    tooltip: {
        headerFormat: '',
        pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
    },

    series: \[{
        // Use the gb-all map with no data as a basemap
        name: 'Basemap',
        borderColor: '#A0A0A0',
        nullColor: 'rgba(200, 200, 200, 0.3)',
        showInLegend: false
    }, {
        name: 'Separators',
        type: 'mapline',
        nullColor: '#707070',
        showInLegend: false,
        enableMouseTracking: false
    }, {
        // Specify points using lat/lon
        type: 'mappoint',
        name: 'Cities',
        color: Highcharts.getOptions().colors\[1\],
        data: \[{
            name: 'London',
            lat: 51.507222,
            lon: -0.1275
        }, {
            name: 'Birmingham',
            lat: 52.483056,
            lon: -1.893611
        }, {
            name: 'Leeds',
            lat: 53.799722,
            lon: -1.549167
        }, {
            name: 'Glasgow',
            lat: 55.858,
            lon: -4.259
        }, {
            name: 'Sheffield',
            lat: 53.383611,
            lon: -1.466944
        }, {
            name: 'Liverpool',
            lat: 53.4,
            lon: -3
        }, {
            name: 'Bristol',
            lat: 51.45,
            lon: -2.583333
        }, {
            name: 'Belfast',
            lat: 54.597,
            lon: -5.93
        }, {
            name: 'Lerwick',
            lat: 60.155,
            lon: -1.145,
            dataLabels: {
                align: 'left',
                x: 5,
                verticalAlign: 'middle'
            }
        }\]
    }\]
});]

Is there any way to show tooltip when mouse is present exactly on the point.

Answer 1

You are looking for stickyTracking.

Sticky tracking of mouse events. When true, the mouseOut event on a series isn't triggered until the mouse moves over another series, or out of the plot area. When false, the mouseOut event on a series is triggered when the mouse leaves the area around the series' graph or markers. This also implies the tooltip when not shared. When stickyTracking is false and tooltip.shared is false, the tooltip will be hidden when moving the mouse between series. Defaults to true for line and area type series, but to false for columns, pies etc.

So by setting plotOptions like this, it will be disabled:

plotOptions: {
  mappoint: {
    stickyTracking: false,
  }
}

Working example: http://jsfiddle.net/ewolden/qgoc1p5z/