How to add custom tooltip items to Apexcharts?

I am using ApexChart and I would like to add som more info to the tooltip (that shows on hover). I have read the documentation but I really don´t understand how to do it.

My problem is that I don't understand where I should add that extra data and how I can make it show in the tooltip?

Right now I only see the default in the tooltip, which is the name of the series and "y" value. I would like to see:

Price: (x value)
Number: (y value)
Product: 'name',
Info: 'info',
Site: 'name'

How can I add this to the tooltip? This is what I got so far:

Fiddle: https://jsfiddle.net/9m0r2ont/1/

Code:

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "scatter",
  },
  series: [
    {
      name: "Series 1",
      data: [
        {
          x: 100,
          y: 50,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 150,
          y: 55,
          product: 'name',
          info: 'info',
          site: 'name'
        }
      ]
    }
  ],
  xaxis: {
    type: "numeric"
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

Solution

Try like this:

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "scatter",
  },
  series: [
    {
      name: "Series 1",
      data: [
        {
          x: 100,
          y: 50,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 150,
          y: 55,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 130,
          y: 44,
          product: 'name',
          info: 'info',
          site: 'name'
        }
      ]
    }
  ],
  xaxis: {
    type: "numeric"
  },
  tooltip: {
    custom: function({series, seriesIndex, dataPointIndex, w}) {
      var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
      
      return '<ul>' +
      '<li><b>Price</b>: ' + data.x + '</li>' +
      '<li><b>Number</b>: ' + data.y + '</li>' +
      '<li><b>Product</b>: \'' + data.product + '\'</li>' +
      '<li><b>Info</b>: \'' + data.info + '\'</li>' +
      '<li><b>Site</b>: \'' + data.site + '\'</li>' +
      '</ul>';
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
</div>

To do this, you need to add a custom tooltip to the options object. Access the w object passed into the function to get the correct data. They have a similar example here. Once you can identify the data you're interested in within that object, use it to return the HTML to show in the tooltip.