How to add Tooltip when hovering over the Total of an Apexcharts chart?

[tomasganan]

I am using ApexChart and would like to add a Tooltip when the user hovers the mouse over the Total. I have read the documentation and forums but have not been able to do it.

My code is as follows:

const chartData = {
      series: series,
      options: {
        chart: {
          selection: {
            enabled: false
          },
          height: 400,
          type: 'radialBar',
          events: {
            dataPointSelection: async function(event, chartContext, config) {
              const dataIndex = config.dataPointIndex;
              const item = chartData.options.labels[dataIndex];
              const functionId = data.function_id;

              let query = {
                date_after: filters.date_after,
                date_before: filters.date_before,
                function_id: functionId,
                keyword: item
              };

              let queryParams = buildQueryString(query);
              const { response, error } = await fetchKeyDetail(queryParams);

              if(response){
                setShowModal(true)
                setNameKey(item)
                setDetailWord(response.data.report)
                setShowText(false)
              }
            }
          }
        },
        states: {
          active: {
            filter: {
              type: 'none'
            }
          }
        },
        plotOptions: {
          radialBar: {
            hollow: {
              size: series.length > 10 ? '25%' : '50%',
            },
            dataLabels: {
              name: {
                fontSize: '14px',
                show: showText,
              },
              value: {
                fontSize: '14px',
                offsetY: 0,
              },
              total: {
                show: true,
                label: data.keywords.length === 1 ? data.keywords[0].keyword : 'Total',
                formatter: function (w) {
                  const totalValue = Math.round(parseFloat(data.conversation_prtg) * 100) / 100;
                  return totalValue;
                },
              }, 
            },
          },
        },
        labels: labels,
      },
    };

I was trying to use the 'tooltip' property, but that adds the tooltip when passing the mouse over each radial circle of the graphic and I need that only the tooltip is activated when I pass the mouse over the Total

tooltip: {
      enabled: true,
      shared: true,
      custom: function({ series, seriesIndex, dataPointIndex, w }) {
        const totalValue = Math.round(parseFloat(data.conversation_prtg) * 100) / 100;
        return `
          <div>
            <div>Total: ${totalValue}</div>
            <div>Additional Information: Your additional information here</div>
          </div>
        `;
      },
    },

I would be very grateful for your help.