Estoy tratando de crear una información sobre herramientas personalizada en el mapa de calor de apexCharts usando el parámetro personalizado para agregar código, en este caso, un enlace específico
tooltip: { custom: function({ series, seriesIndex, dataPointIndex, w }) { // code to return a string with a link } }Pero si quiero un enlace dentro de la información sobre herramientas, ¿cómo puedo hacer que la información sobre herramientas permanezca lo suficiente como para hacer clic en el enlace? En el momento en que trato de moverme a la información sobre herramientas para hacer clic en el enlace, simplemente desaparece y muestra la información sobre herramientas para la siguiente celda en el mapa de calor o desaparece porque estoy fuera de la celda.
Probablemente se pueda hacer algo con las transiciones/retrasos de css para la información sobre herramientas de apexcharts, pero no puedo resolverlo.
JSFiddle: https://jsfiddle.net/2kmgpc5w/1/
BR, Daniel
Para cualquier persona interesada en esto.
No pude hacer clic en una información sobre herramientas en apexcharts, así que deshabilité la información sobre herramientas en apexcharts e introduje una ventana emergente de arranque como esta que funciona de manera similar a una información sobre herramientas.
$('.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); }); });