chart.options({
  type: 'interval',
  tooltip: {
    title: 'name', // Title
    items: ['genre'], // Data items
  },
});

chart.options({
  type: 'view',
  interaction: {
    tooltip: { series: true },
  },
});

chart.options({
  type: 'line',
  interaction: {
    tooltip: { series: true },
  },
});

chart.options({
  type: 'interval',
  tooltip: false,
});

chart.options({
  type: 'view',
  interaction: { tooltip: false },
});

chart.options({
  type: 'interval',
  tooltip: {
    title: (d) => (d.sold > 150 ? 'high' : 'low'), // Set title
  },
});

chart.options({
  type: 'interval',
  tooltip: ['genre', 'sold'],
});

chart.options({
  tooltip: {
    title: 'sold',
    items: ['genre'],
  },
});

// Equivalent to
chart.options({
  tooltip: {
    title: { field: 'sold' },
    items: [{ field: 'genre' }],
  },
});

chart.options({
  tooltip: {
    title: { channel: 'x' },
    items: [{ channel: 'y' }],
  },
});

chart.options({
  tooltip: {
    title: {field: 'sold', valueFormatter: (sold) => sold.toUpperCase()},
    items: [{ channel: 'y', valueFormatter: '.0%' }],
  },
});

chart.options({
  tooltip: {
    title: (datum, index, data, column) => ({
      value: `<span style="color: #00ff00; font-style: italic;">${datum.letter}</span>`,
      custom: "..."
    }),
    items: [
      (datum, index, data, column) => ({
        color: datum.sold > 150 ? 'red' : 'blue', // Specify item color
        name: index === 0 ? datum.genre : `${datum.genre} ${data[index].genre}`, // Specify item name
        value: column.y.value[index], // Use y channel value
        custom: "..."
      }),
    ],
  },
});

({
  tooltip: {
    nodeTitle: (d) => d.key,
    linkTitle: (d) => 'link',
  },
});

chart.options({
  tooltip: {
    items: [
      {name: 'Zhang San', channel: 'y1'},
      {name: 'Li Si', channel: 'y2'},
    ],
  },
});

chart.options({
  tooltip: {
    items: [
      {color: 'pink', channel: 'y1'},
      {color: '#f00', channel: 'y2'},
    ],
  },
});

({
  tooltip: {
    nodeItems: [
      (datum, index, data, column) => {
        return {
          color: 'red', // Specify item color
          name: 'Node', // Specify item name
          value: d.key, // Use y channel value
          content: 'Node custom attribute',
        };
      },
    ],
    linkItems: [
      (datum, index, data, column) => {
        return {
          color: 'red', // Specify item color
          name: 'Link', // Specify item name
          value: `${d.source.key}-${d.target.key}`, // Use y channel value
          content: 'Link custom attribute',
        };
      },
    ],
  },
});

chart.options({
  interaction: {
    legendFilter: false,
    elementPointMove: true,
    tooltip: {
      crosshairs: true, // Enable crosshairs
      crosshairsStroke: 'red', // Crosshair color is red
      crosshairsYStroke: 'yellow', // Vertical crosshair color set separately to yellow
      crosshairsLineDash: [4, 4], // Crosshair dashed style
      markerType: 'hollow', // Tooltip marker is hollow
    },
  },
});

chart.options({
  interaction: {
    tooltip: {
      marker: true,
      markerType: 'hollow', // Tooltip marker is hollow
      markerStroke: 'yellow',
      markerLineWidth: 2,
      markerLineDash: [4, 4],
    },
  },
});

function render(event, tooltipData) {
  const { title, items } = tooltipData;
  return `<div></div>`;
}

chart.on('tooltip:show', (event) => {
  console.log(event.data.data);
});

chart.on('tooltip:hide', () => {
  console.log('hide');
});

mark.tooltip({
  title: 'name', // Field
});

mark.tooltip({
  title: (d) => (d.value > 100 ? d.name : d.age), // Transform
});

// Single field
mark.tooltip('a');
mark.tooltip({ field: 'a' });

// Single channel
mark.tooltip({ channel: 'y' });

// Transform
mark.tooltip((d) => (d.value > 100 ? d.name : d.age));

// Formatting
mark.tooltip({ channel: 'y', valueFormatter: (d) => d.toFixed(1) });

// d3-format supported strings
// https://github.com/d3/d3-format
mark.tooltip({ channel: 'y', valueFormatter: '~s' });

// Complete information
mark.tooltip({ name: 'name', color: 'red', value: 'color' });

// Callback
mark.tooltip(
  (
    d, // Each data item
    index, // Index
    data, // Complete data
    column, // Channel
  ) => ({
    value: `${column.y.value[index]} - ${column.y1.value[index]}`,
  }),
);

// Multiple items
mark.tooltip({ channel: 'y' }).tooltip({ channel: 'x' });

mark.tooltip({
  title: 'a',
  items: [{ channel: 'x' }, { channel: 'y' }],
});

chart.options({
  tooltip: {
    items: [
      (datum, index, data, column) => ({
        color: datum.sold > 150 ? 'red' : 'blue', // Specify item color
        name: index === 0 ? datum.genre : `${datum.genre} ${data[index].genre}`, // Specify item name
        value: column.y.value[index], // Use y channel value
        custom1: 'Custom parameter 1',
        custom2: 'Custom parameter 2'
      }),
    ],
  },
  interaction: {
    tooltip: {
      // render callback method returns innerHTML or DOM
      render: (event, { title, items }) => {
        return  `<div>
          <h3 style="padding:0;margin:0">${title}</h3>
          <ul>${items.map(
              ({ color, name, value, custom1, custom2 }) => "..."
          )}</ul>
        </div>`
      }
    }
  }
});

// Bar charts, point charts, etc.
chart
  .interval()
  .data([
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ])
  .encode('x', 'genre')
  .encode('y', 'sold')
  .encode('color', 'genre');

chart.render().then((chart) =>
  chart.emit('tooltip:show', {
    offsetX: 10, // Position relative to plot area
    offsetY: 20, // Position relative to plot area
    data: {
      data: { genre: 'Sports' }, // Will find matching data from original data
    },
  }),
);

chart
  .line()
  .data({ type: 'fetch', value: 'data/aapl.csv' })
  .encode('x', 'date')
  .encode('y', 'close');

// Pick based on data
chart.render((chart) =>
  chart.emit('tooltip:show', {
    data: {
      data: { x: new Date('2010-11-16') },
    },
  }),
);

// Pick based on pixels
chart.render((chart) =>
  chart.emit('tooltip:show', {
    offsetX: 200,
    offsetY: 200,
  }),
);

chart.emit('tooltip:hide');

chart.emit('tooltip:disable'); // Disable tooltip
chart.emit('tooltip:enable'); // Enable interaction

chart.interaction('tooltip', {
  crosshairs: true, // Enable crosshairs
  crosshairsXStroke: 'red', // Set X-axis crosshair color to 'red'
  crosshairsYStroke: 'blue', // Set Y-axis crosshair color to 'blue'
});

chart.interaction('tooltip', {
  crosshairsX: true, // Enable crosshairsX
  crosshairsXStroke: 'red', // Set X-axis crosshair color to 'red'
  crosshairsYStroke: 'blue', // Set Y-axis crosshair color to 'blue'
});

chart.interaction('tooltip', {
  markerType: 'hollow', // Set tooltip point style to hollow circle
});

({
  type: 'sankey',
  data: {
    value: {
      nodes: [
        { id: 'a', key: 'Home', des: 'Node custom attribute' },
        { id: 'b', key: 'Page1', des: 'Node custom attribute' },
        { id: 'b_1', key: 'Page1', des: 'Node custom attribute' },
        { id: 'c', key: 'Page2', des: 'Node custom attribute' },
        { id: 'c_1', key: 'Page2', des: 'Node custom attribute' },
        { id: 'd', key: 'Page3', des: 'Node custom attribute' },
        { id: 'd_1', key: 'Page3', des: 'Node custom attribute' },
      ],
      links: [
        { source: 'a', target: 'b', value: 100 },
        { source: 'b', target: 'c', value: 80 },
        { source: 'b', target: 'd', value: 20 },
        { source: 'c', target: 'b_1', value: 80 },
        { source: 'b_1', target: 'c_1', value: 40 },
        { source: 'b_1', target: 'd_1', value: 40 },
      ],
    },
    transform: [
      {
        type: 'custom',
        callback: (data) => ({
          nodes: data.nodes,
          links: data.links,
        }),
      },
    ],
  },
  tooltip: {
    nodeItems: [
      (datum, index, data, column) => {
        return {
          content: d.des,
        };
      },
    ],
    linkItems: [
      (datum, index, data, column) => {
        return {
          color: 'red', // Specify item color
          name: 'Link', // Specify item name
          value: `${d.source.key}-${d.target.key}`, // Use y channel value
          content: 'Link custom attribute',
        };
      },
    ],
  },
  layout: {
    nodeId: (d) => d.id,
    nodeAlign: 'center',
    nodePadding: 0.03,
    iterations: 25,
  },
  style: {
    labelSpacing: 3,
    labelFontWeight: 'bold',
    linkFillOpacity: 0.2,
    linkFill: '#3F96FF',
  },
  interaction: {
    tooltip: {
      render: (e, { items, title }) => {
        return `<div>${items[0].content}</div>`;
      },
    },
  },
});