Chartist.js多图表hover时所有tooltip显示问题的解决方法

这个问题的根源很明确：你现在的代码是创建一个tooltip元素后，把它直接追加到所有.ct-chart容器里，导致$tooltip是一个包含所有图表tooltip的jQuery集合。当你调用修改文本、切换类名这类操作时，会同时作用于所有tooltip，所以hover一个点时所有图表的tooltip都会显示出来。

下面是具体的修复方案，核心思路是让每个图表拥有独立的专属tooltip，并在事件中只操作当前hover点所属图表的tooltip：

1. 为每个图表单独创建Tooltip #

不再一次性创建一个tooltip复用，而是遍历每个图表容器，给每个容器生成自己的tooltip：

// 遍历所有图表容器，为每个容器创建独立的tooltip
$('.ct-chart').each(function() {
  $('<div class="tooltip tooltip-hidden"></div>').appendTo($(this));
});

2. 事件绑定中精准定位当前图表的Tooltip #

在鼠标事件触发时，先找到当前点所属的图表容器，再获取该容器下的tooltip，只对这个特定的tooltip进行操作：

// 鼠标进入数据点时，显示当前图表的tooltip
$(document).on('mouseenter', '.ct-point', function() {
  const $currentPoint = $(this);
  const $parentChart = $currentPoint.closest('.ct-chart'); // 定位当前点所属的图表容器
  const $targetTooltip = $parentChart.find('.tooltip'); // 获取该图表的专属tooltip

  const seriesName = $currentPoint.attr('ct:meta');
  const value = $currentPoint.attr('ct:value');

  $targetTooltip.text(`${seriesName}: ${value}`); // 可同时展示系列名和数值
  $targetTooltip.removeClass('tooltip-hidden');
});

// 鼠标离开数据点时，隐藏当前图表的tooltip
$(document).on('mouseleave', '.ct-point', function() {
  const $parentChart = $(this).closest('.ct-chart');
  const $targetTooltip = $parentChart.find('.tooltip');
  
  $targetTooltip.addClass('tooltip-hidden');
});

// 鼠标移动时，更新当前图表tooltip的位置
$(document).on('mousemove', '.ct-point', function(event) {
  const $parentChart = $(this).closest('.ct-chart');
  const $targetTooltip = $parentChart.find('.tooltip');

  // 用pageX/Y结合图表偏移量计算，适配图表不在页面左上角的场景
  const chartOffset = $parentChart.offset();
  $targetTooltip.css({
    left: event.pageX - chartOffset.left - $targetTooltip.width() / 2,
    top: event.pageY - chartOffset.top - $targetTooltip.height() - 20
  });
});

额外优化说明 #

• 使用closest('.ct-chart')可以精准找到当前数据点的父级图表容器，避免跨图表干扰；
• 位置计算从offsetX/Y换成pageX/Y结合图表offset()，能确保tooltip在任何布局下都显示在正确位置；
• 你的.tooltip和.tooltip-hidden样式可以完全保留，不需要做任何修改。

内容的提问来源于stack exchange，提问作者aeshna Kashyap