Feature Request: Enable Interactive Tooltips in ApexCharts

[FADL285]

Summary

Currently, tooltips in ApexCharts hide when the mouse moves away from the chart marker, making it difficult to interact with elements within the tooltip. I propose adding an option to make tooltips interactive, allowing them to remain visible when hovered over. This would enable users to select or interact with custom content inside the tooltip without it disappearing.

API Changes

Add a new configuration option in the tooltip settings:

tooltip: {
  interactive: true // Default value: false
}

Example Usage

var options = {
  chart: {
    type: 'scatter'
  },
  series: [{
    name: 'Sample Data',
    data: [[1, 2], [2, 3], [3, 4], [4, 5], [5, 6]]
  }],
  tooltip: {
    enabled: true,
    interactive: true,
    custom: function({ seriesIndex, dataPointIndex, w }) {
      const seriesItem = w.config.series[seriesIndex];
      return `
        <div>
          <p>${seriesItem.name}</p>
          <a href="${seriesItem.metadata.url}" target="_blank">More Info</a>
        </div>
      `;
    }
  }
};

Intended Use Case

This feature would be particularly useful for dashboards and data-driven applications where users need to interact with additional information or actions provided within the tooltip. For example, in financial charts, users could click on links for more detailed reports, or in e-commerce analytics, they could view and interact with product details directly from the tooltip. This enhancement will improve user experience by making the tooltip content more accessible and functional.