Keep tooltip visible if it is hovered

[Karpengold]

I would like to provide user ability to copy value from tooltip, but when mouse pointer goes outside of chart to tooltip, tooltip disappears. Is it possible to keep it if it is hovered?

[saber-mekki]

Hi @Karpengold ! Did you solve this issue? we have the same need !

[saber-mekki]

@Karpengold i use this :

.apexcharts-tooltip {
     opacity: 1 !important;
 }

but i can't Interact With it !

[Karpengold]

To interact with a tooltip you need to set pointer events, like this:

.apexcharts-tooltip {
     opacity: 1 !important;
     pointer-events: all !important
 }

[Karpengold]

@saber-mekki I found this solution as well, but I don't want to keep tooltip always visible, only if user hovers it

[Karpengold]

so I made some custom solution using css variables, it is not exactly what I needed because to close tooltip user should move cursor out of the chart

events: {
              mouseLeave: () => {
                 containerRef.current?.style.setProperty(--apex-tooltip-opacity, "0");
                 containerRef.current?.style.setProperty(--apex-tooltip-height,  "0");
              },
              dataPointMouseEnter: () => {
                containerRef.current?.style.setProperty(--apex-tooltip-opacity,  "1" );
                containerRef.current?.style.setProperty(--apex-tooltip-height,  "unset" );
              },
            },

.apexcharts-tooltip {
  opacity: var(--apex-tooltip-opacity) !important;
  height: var(--apex-tooltip-height) !important;
  pointer-events: all !important;
}

[dafunq]

I had a similar case for a heatmap where I wanted tooltips visible and clickable. I tried with tooltips first but did not get it to work but then, I turned off tooltips in apexcharts and introduced the bootstrap popover() when a mouse enters and leaves an element. This will keep the tooltip open as long as you hover over it so it lets you click a link etc.

updated: function(chartContext, config) {          
              $('.apexcharts-heatmap-rect').popover({
                trigger: "manual",
                placement: "right",
                container: "body",
                html: true,
                animation: false,
                content: function () {
                    return get_formatted_popover(version, test_area, report);
                }
              })
              .on("mouseenter", function() {
                var _this = this;
                $(this).popover("show");
                $(".popover").on("mouseleave", function() {
                
                  $(_this).popover('hide');
                });
              }).on("mouseleave", function() {
                var _this = this;
                setTimeout(function() {
                  if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                  }
                }, 25);
              });
}

`