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