javascript - 无法单击带有链接的自定义工具提示的 Apexcharts

Question

我正在尝试使用自定义参数在 apexCharts 热图中创建自定义工具提示以添加代码，在本例中为特定链接

    tooltip: {
            custom: function({ series, seriesIndex, dataPointIndex, w }) {
              // code to return a string with a link
            }
    }

但是，如果我想要工具提示中的链接，我怎样才能让工具提示保持足够长的时间让我点击链接？在我尝试移动到工具提示以单击链接时，它会消失，并且要么显示热图中下一个单元格的工具提示，要么因为我在单元格之外而消失。
可能可以使用 css 转换/延迟为 apexcharts 工具提示做一些事情，但无法弄清楚。
JSFiddle:https://jsfiddle.net/2kmgpc5w/1/
BR,
丹尼尔

Answer 1

对于任何对此感兴趣的人。
我无法在 apexcharts 中制作可点击的工具提示，所以我在 apexcharts 中禁用了工具提示，并引入了一个类似于工具提示的引导弹出窗口。

$('.apexcharts-heatmap-rect').popover({
    trigger: "manual",
    placement: "top",
    container: "body",
    html: true,
    animation: false,
    content: function () {
        return "<p><b>Verdict: </b>Fail</p><p><b>Issues</b><br><a href=\"https://mylink.com\">Issue 1</a><br><a href=\"https://mylink.com\">Issue 2</a></p><p><b>Comments</b><br>Issue 1 is critical making this test area fail</p>";
    }
  })
  .on("mouseenter", function() {
    var _this = this;
    console.log("enter this");
    console.log(this);
    console.log($(this).attr("val"));
    $(this).popover("show");
    $(".popover").on("mouseleave", function() {
    
     console.log("leave popover");
      $(_this).popover('hide');
    });
  }).on("mouseleave", function() {
    var _this = this;
    setTimeout(function() {
     console.log("leave cell");
      if (!$(".popover:hover").length) {
        $(_this).popover("hide");
      }
    }, 20);
  });
});