Question

我使用node.js和Chartist.js制作图表，我使用jQuery和CSS为点创建工具提示。

现在，问题是图表是在服务器中生成的，并且将始终具有相同的根类ct-chart以及与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');时，它会从所有类中删除它。

你需要一种方法来区分它们 - 我建议像：

$(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
});

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

我构建了这个小测试，以表明当你使用＆＃34; appendTo＆＃34;时，该变量会被你所定位的所有元素填充。 https://jsfiddle.net/wvLy2enm/

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

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

1 个答案: