4

I'm trying to create a custom tooltip in apexCharts heatmap using the custom parameter to add code, in this case a specific link


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

But if I want a link within the tooltip, how can I make tooltip stick long enough for me to click the link? At the moment when I try to move to the tooltip to click the link it just disappear and either shows the tooltip for the next cell in the heatmap or goes away since I am outside the cell.

Probably something can be done with css transitions/delays for the apexcharts tooltips but can't figure it out.

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

BR, Daniel

Daniel Nilsson
  • 51
  • 6

1 Answers1

1

For anyone interested in this.

I was unable to make a tooltip clickable in apexcharts so I diabled tooltips in apexcharts and introduced a bootstrap popover instead like this that works similar to a tooltip.

$('.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);
  });
});
Daniel Nilsson
  • 51
  • 6