如何基于鼠标坐标定位Highcharts地图Tooltip？

一、简便实现：固定偏移 #

• 直接配置Tooltip的distance属性，设置固定像素值让Tooltip与鼠标保持安全距离，快速解决遮挡问题：

tooltip: {
  distance: 15, // 让Tooltip远离鼠标15px
  // 其他Tooltip配置（如formatter）
}

• 这种方式无需复杂计算，适合大多数通用场景。

二、自定义positioner函数（适配不同区域） #

如果固定偏移无法满足小区域/特殊位置的精准需求，可通过positioner函数动态计算Tooltip位置，完全避免与鼠标或地图区域重叠。

核心逻辑 #

positioner函数接收tooltipWidth、tooltipHeight两个参数，通过this可访问图表实例（包括鼠标坐标this.chart.mouseX/this.chart.mouseY、图表尺寸等），根据这些值计算Tooltip的左上角坐标（x,y），同时做边界检查确保Tooltip始终在图表可视范围内。

React环境下的配置示例 #

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import mapData from '@highcharts/map-collection/custom/world.geo.json';

require('highcharts/modules/map')(Highcharts);

const MapComponent = () => {
  const options = {
    chart: {
      map: mapData
    },
    tooltip: {
      positioner: function(tooltipWidth, tooltipHeight) {
        const chart = this.chart;
        const mouseX = chart.mouseX;
        const mouseY = chart.mouseY;
        const chartWidth = chart.chartWidth;
        const chartHeight = chart.chartHeight;

        // 默认将Tooltip放在鼠标右上方
        let x = mouseX + 10;
        let y = mouseY - tooltipHeight - 10;

        // 右侧超出图表范围时，调整到鼠标左方
        if (x + tooltipWidth > chartWidth) {
          x = mouseX - tooltipWidth - 10;
        }
        // 上方超出图表范围时，调整到鼠标下方
        if (y < 0) {
          y = mouseY + 10;
        }

        return { x, y };
      },
      formatter: function() {
        return `<b>${this.point.name}</b><br>数据：${this.point.value}`;
      }
    },
    series: [{
      data: [/* 你的国家数据集合 */]
    }]
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default MapComponent;

进阶优化：贴合地图区域位置 #

针对极小区域的场景，可结合hover区域的中心坐标调整Tooltip位置，避免Tooltip覆盖区域本身：

positioner: function(tooltipWidth, tooltipHeight) {
  const chart = this.chart;
  const hoverPoint = chart.hoverPoint;
  // 转换区域中心坐标为图表绝对坐标
  const pointX = hoverPoint.plotX + chart.plotLeft;
  const pointY = hoverPoint.plotY + chart.plotTop;

  // 将Tooltip放在区域中心的右上方
  let x = pointX + 10;
  let y = pointY - tooltipHeight - 10;

  // 边界检查
  if (x + tooltipWidth > chart.chartWidth) x = pointX - tooltipWidth - 10;
  if (y < 0) y = pointY + 10;

  return { x, y };
}

内容的提问来源于stack exchange，提问作者Rusty Nail