带有 link 的自定义工具提示的 Apexcharts 无法单击

Question

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


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

但是如果我想在工具提示中使用 link，我怎样才能让工具提示停留足够长的时间让我点击 link？在我尝试移动到工具提示以单击 link 时，它只是消失了，或者显示热图中下一个单元格的工具提示，或者因为我在单元格之外而消失。

可能可以使用 css transitions/delays 为 apexcharts 工具提示做一些事情，但无法弄清楚。

JSFiddle：https://jsfiddle.net/2kmgpc5w/1/

BR, 丹尼尔

Answer 1

任何对此感兴趣的人。

我无法在 apexcharts 中使工具提示可点击，因此我禁用了 apexcharts 中的工具提示并引入了一个 bootstrap 弹出窗口，而不是像这样工作类似于工具提示。

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

带有 link 的自定义工具提示的 Apexcharts 无法单击

Apexcharts with custom tooltip with link is not possible to click

javascript

css

apexcharts