CODEWITHSUNDEEP
javascripthighchartshighmaps
wergeld
wergeld

Reputation: 14442

Extend ToolTip Duration On Linked Map

I am using latest Highmaps and am trying to create a page with 2 (or more) maps on it. Rendering the maps is fine. The issue is when I am trying to link the tooltips among all maps. I have set up a basic example here. My issue is that the non-primary map's tooltip fades out after some time (tooltip.hideDelay). I do not want to increase the hideDelay as it will also need to be applied to all charts (which will cause tooltips to stay around far too long on the "primary" map that the user is hovering over).

How can I make the tooltip on any secondary map stay visible until such time as the user does mouseOut on the map they are interacting with?

My code to link the tooltips is as follows:

    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function () {
                        //get this map's selected shape:
                        var selGeoID = this.properties.code_hasc;

                        //set up other chart's pointers:
                        var otherChart = $('#container2').highcharts();
                        var otherData = (otherChart.series[0].data);

                        //find this map's shape ID in the other chart's shapes:
                        var arrayData = $.grep(otherData, function (e) {
                            return e.code_hasc == selGeoID;
                        });

                        //if we have a match then loop through all points in
                        //other map to set tooltip on/off:
                        if (arrayData.length == 1) {
                            newIndex = arrayData[0].index;
                            otherData.forEach(function (arrayItem) {
                                if (arrayItem.index != newIndex) {
                                    arrayItem.setState();
                                    otherChart.tooltip.hide();
                                } else {
                                    otherData[newIndex].setState('hover');
                                    otherChart.tooltip.refresh(otherData[newIndex]);
                                }
                            });
                        }
                    },
                    //clear tooltips on other chart:
                    mouseOut: function () {
                        var otherChart = $('#container2').highcharts();
                        var otherData = (otherChart.series[0].data);
                        otherData.forEach(function (arrayItem) {
                            arrayItem.setState();
                            otherChart.tooltip.hide();
                        });
                    }
                }
            }
        }
    },

Upvotes: 0

Views: 52

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

To prevent tooltip in the second chart from hiding, do not call tooltip.hide() in line 86 of your JS code in the JSFiddle.

Fixed fiddle: http://jsfiddle.net/1fq9jh0e/

Upvotes: 1

Related Questions