将鼠标悬停在图表上的某个点上时为所有图表显示的工具提示

Question

我正在使用 node.js 和 Chartist.js 制作图表，我正在使用 jQuery 和 CSS.

为点创建工具提示

现在，问题是图表正在服务器中生成，并且将始终具有相同的根 class ct-chart 和相同的其他 classes，因为它们是由Chartist.js。由于我的代码有多个图表，当我将鼠标悬停在一个图表上的一个点上时，它会在所有图表上显示工具提示，而不仅仅是该图表本身。

我该如何解决这个问题？

这是我的代码：

var $tooltip = $('<div class="tooltip tooltip-hidden"></div>').appendTo($('.ct-chart'));
console.log($tooltip);

$(document).on('mouseenter', '.ct-point', function() {
  var seriesName = $(this).closest('.ct-point').attr('ct:meta'),
      value = $(this).attr('ct:value');

  $tooltip.text(seriesName);
  $tooltip.removeClass('tooltip-hidden');
});

$(document).on('mouseleave', '.ct-point', function() {
  $tooltip.addClass('tooltip-hidden');
});

$(document).on('mousemove', '.ct-point', function(event) {
  $tooltip.css({
    left: event.offsetX - $tooltip.width() / 2,
    top: event.offsetY - $tooltip.height() - 20
  });
});

Answer 1

我认为正在发生的事情是 $tooltip 变量包含所有图表的 jquery 数组。因此，当您执行 $tooltip.removeClass('tooltip-hidden'); 时，它会从所有这些中删除 class。

您需要一种方法来区分它们 - 我建议如下：

$(document).on('mouseenter', '.ct-point', function() {
  var seriesName = $(this).closest('.ct-point').attr('ct:meta'),
      value = $(this).attr('ct:value'),
      index = $(this).index(); // get the index of the point
  $tooltip.eq(index).text(seriesName);
  $tooltip.eq(index).removeClass('tooltip-hidden'); // use the index to remove only one class
});

我还没有对此进行测试，但我认为它应该可以工作。您必须在所有代码中应用它。

我构建这个小测试是为了表明当您使用 "appendTo" 时，该变量会填充您定位的所有这些元素。 https://jsfiddle.net/wvLy2enm/

您也应该在控制台日志中看到这一点。

将鼠标悬停在图表上的某个点上时为所有图表显示的工具提示

Tooltips displayed for all charts when hovering over a point on a chart

javascript

node.js

chartist.js