Recharts实现点击图表点后Tooltip常驻屏幕的方法咨询

要实现点击图表数据点后Tooltip保持显示、不随鼠标移动消失的效果，核心是通过点击事件接管Tooltip的显示逻辑，禁用默认的鼠标移出隐藏行为，或者手动控制显示/隐藏状态。以下是不同场景下的具体实现方案：

针对ECharts的实现 #

通过配置Tooltip触发方式，并结合点击事件切换显示状态，支持点击同一点隐藏Tooltip：

const myChart = echarts.init(document.getElementById('main'));
let activeDataIndex = null; // 记录当前激活的数据点索引

const option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click', // 仅响应点击事件，禁用鼠标移入触发
    alwaysShowContent: true // 保持Tooltip内容持续显示
  },
  xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [10, 25, 18, 32],
    emphasis: { focus: 'series' }
  }]
};

myChart.setOption(option);

// 绑定点击事件控制Tooltip显示/隐藏
myChart.on('click', (params) => {
  if (activeDataIndex === params.dataIndex) {
    // 再次点击同一点，隐藏Tooltip
    myChart.dispatchAction({ type: 'hideTip' });
    activeDataIndex = null;
  } else {
    // 点击新点，显示对应Tooltip
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: params.seriesIndex,
      dataIndex: params.dataIndex
    });
    activeDataIndex = params.dataIndex;
  }
});

针对Highcharts的实现 #

通过关闭Tooltip自动隐藏，给数据点绑定点击事件来手动控制显示状态：

Highcharts.chart('container', {
  tooltip: {
    hideDelay: 0, // 关闭自动延迟隐藏
    followPointer: false, // 固定Tooltip位置，不跟随鼠标移动
    trigger: 'click' // 仅点击触发Tooltip
  },
  xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] },
  yAxis: { title: { text: '数值' } },
  series: [{
    type: 'column',
    data: [12, 19, 15, 24],
    point: {
      events: {
        click: function() {
          const chart = this.series.chart;
          // 切换当前点的Tooltip显示状态
          if (this.tooltipVisible) {
            chart.tooltip.hide();
            this.tooltipVisible = false;
          } else {
            chart.tooltip.refresh(this);
            this.tooltipVisible = true;
          }
        }
      }
    }
  }]
});

自定义Tooltip方案（通用场景） #

如果使用原生图表或小众库，可以自己实现Tooltip元素，完全控制显示逻辑：

HTML结构 #

<div class="chart-container">
  <!-- 图表元素，假设每个数据点有chart-point类和data-value属性 -->
  <div class="chart-point" id="point1" data-value="15"></div>
  <div class="chart-point" id="point2" data-value="22"></div>
</div>
<div id="custom-tooltip"></div>

CSS样式 #

#custom-tooltip {
  position: absolute;
  background-color: #2c3e50;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  display: none;
  z-index: 9999;
  pointer-events: none; /* 避免Tooltip阻挡点击事件 */
}
#custom-tooltip.show {
  display: block;
}

JavaScript逻辑 #

const points = document.querySelectorAll('.chart-point');
const customTooltip = document.getElementById('custom-tooltip');

points.forEach(point => {
  point.addEventListener('click', (e) => {
    // 判断当前Tooltip是否为该点的显示状态
    const isCurrentPoint = customTooltip.classList.contains('show') && 
                          customTooltip.dataset.pointId === point.id;
    if (isCurrentPoint) {
      customTooltip.classList.remove('show');
      return;
    }
    // 设置Tooltip内容和位置
    customTooltip.textContent = `数值：${point.dataset.value}`;
    customTooltip.style.left = `${e.pageX + 15}px`;
    customTooltip.style.top = `${e.pageY + 15}px`;
    customTooltip.dataset.pointId = point.id;
    customTooltip.classList.add('show');
  });
});

// 点击页面其他区域隐藏Tooltip
document.addEventListener('click', (e) => {
  const isChartPoint = e.target.classList.contains('chart-point');
  const isTooltip = customTooltip.contains(e.target);
  if (!isChartPoint && !isTooltip) {
    customTooltip.classList.remove('show');
  }
});

内容的提问来源于stack exchange，提问作者Aika Sat